较少的样式表语言：防止编译后的CSS中省略括号

Question

我正在使用 {less}，在使用括号时遇到了问题。我为 CSS3 的 transform 属性编写了一个 mixin。我无法弄清如何在编译后的 CSS 中使用括号。Less 将括号视为操作符并将其省略。

原始 CSS：

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

我写的Less 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; }

- Alan

Answer 1

您可以将其保留为一个值，并在调用时传入所需内容。

.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);
}

- ferne97

---

这个可以工作。我仍在努力理解参数和其他 less 的部分。我不是程序员，所以这让我感到很愚蠢。谢谢。 - Alan

使用@arguments变量只是一种从mixin中传递所有参数的简单方法。在我的示例中，这并不是真正必要的，因为只有一个参数，您也可以直接调用@value变量。 - ferne97

Answer 2

将你的mixin更改为以下内容（关键是将其构建为字符串，然后使用转义值）：

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

- ScottS