Question

我有以下

<!-- index.html -->
<div ng-app="myApp">
  <my-parent-dir />
</div>

<!-- main.js -->
var app = angular.module("myApp", []);
app.directive("myParentDir", function() {
    return {
        restrict: 'E',
        template: '<my-first-child /> <my-second-child />'
    };
});

app.directive("myFirstChild", function() {
    return {
        restrict: 'E',
        template: '<input type="text" placeholder="first">',
    };
});

app.directive("mySecondChild", function() {
    return {
        restrict: 'E',
        template: '<input type="text" placeholder="second">',
    };
});

.linear-gradient(~"to left, #83111b 0, #83111b 50%, lighten(#83111b, 5%) 50%, lighten(#83111b, 5%) 100%");如下

linear-gradient

是否有可能逃脱.linear-gradient(@params) { background-image: linear-gradient(@params); background-image: -webkit-linear-gradient(@params); background-image: -moz-linear-gradient(@params); }？我知道我可以使用变量来存储它，但我想避免使用它。

Answer 1

不，你不能在转义字符串中调用内置函数，因为它被视为单个字符串，因此函数不会被调用/评估。

令人惊讶的是，似乎不需要临时变量，类似下面的内容适用于这种特殊情况。较少的编译器似乎是连接并将整个事物视为单个参数。

.linear-gradient(@params) {
  background-image: linear-gradient(@params);
  background-image: -webkit-linear-gradient(@params);
  background-image: -moz-linear-gradient(@params);
}
a{
  .linear-gradient(~"to left, #83111b 0, #83111b 50%," lighten(#83111b, 5%) ~"50%," lighten(#83111b, 5%) ~"100%");
}

对于很多类似的情况，这个模型似乎工作正常，所以我认为它不会失效。事实上，由于它们是空间分隔的（而不是逗号分隔），所以最后的额外分号也不是必需的。（只有当逗号分隔值应被视为单个参数时才需要使用分号。这是因为分号或逗号可以用作mixin参数分隔符，但是当存在分号时，逗号不再被视为分隔符。）

但我仍然会建议做类似下面的事情，因为它看起来更具可读性和清晰度。

.linear-gradient(@params) {
  background-image: linear-gradient(@params);
  background-image: -webkit-linear-gradient(@params);
  background-image: -moz-linear-gradient(@params);
}

a{
  @color1: lighten(#83111b, 5%);
  .linear-gradient(~"to left, #83111b 0, #83111b 50%, @{color1} 50%, @{color1} 100%");
}

Qwertiy建议的选项也是一个非常好的选项，但要注意@arguments选项，因为当同一个mixin有多个其他参数时，它会将所有参数连接成一个单独的空格分隔值。

Answer 2

是否可以逃避lighten(#83111b, 5%)？

没有。如果要使用逗号传递字符串，请使用@arguments并在调用者端关闭括号之前添加分号。

.linear-gradient(~"to left, #83111b 0, #83111b 50%, lighten(#83111b, 5%) 50%, lighten(#83111b, 5%) 100%");

.linear-gradient(@params) {
    background-image: linear-gradient(@params);
    background-image: -webkit-linear-gradient(@params);
    background-image: -moz-linear-gradient(@params);
}

错误。虽然linear-gradient有to left，但其他两个应该right而不是{。}}。

在标准版本之前放置前缀变体也是很好的。

如何在Less中逃避内置函数？

2 个答案: