6

我正在使用 {less} 并遇到了使用括号的问题。我为 CSS3 转换属性编写了一个 mixin。我不知道如何在编译的 CSS 中有括号。Less 将括号视为操作并省略它们。

原始CSS:

   .plus {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg); }

少了我写的mixin:

    .transform (@action, @value){
        -webkit-transform: @action(@value);
        -moz-transform: @action(@value);
        -o-transform: @action(@value); }

以及编译后的 CSS:

   .plus {
      -webkit-transform: rotate 45deg;
      -moz-transform: rotate 45deg;
     -o-transform: rotate 45deg; }
4

2 回答 2

5

您可以将其保留为一个值,并在调用它时传入您需要的任何内容。

.transform(@value) {
    -webkit-transform: @arguments;
    -moz-transform: @arguments;
    transform: @arguments;
}

.plus {
    .transform(rotate(45deg));
    .transform(scale(1.5, 2.0));
}

编译为

.plus {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform: scale(1.5, 2);
    -moz-transform: scale(1.5, 2);
    transform: scale(1.5, 2);
}
于 2013-04-30T01:56:41.457 回答
4

将您的 mixin 更改为这样的内容(关键是将其构建为字符串,然后使用转义值):

.transform (@action, @value){
  @escapedValue: ~"@{action}(@{value})";
  -webkit-transform: @escapedValue;
     -moz-transform: @escapedValue;
       -o-transform: @escapedValue; 
}
于 2013-04-30T00:42:48.240 回答