更少的样式表语言：防止在编译的 CSS 中省略括号答案

【问题标题】：Less style sheet language: prevent parentheses from being omitted in compiled CSS更少的样式表语言：防止在编译的 CSS 中省略括号
【发布时间】：2013-04-30 00:26:43
【问题描述】：

我正在使用 {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; }

【问题讨论】：

标签： css less transform

【解决方案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);
}

【讨论】：

这行得通。我仍在努力解决争论和其他问题。我不是程序员，所以这让我觉得自己很愚蠢。谢谢
使用 @arguments 变量只是从 mixin 传递所有参数的简单方法。在我的示例中，这并不是必需的，因为只有一个，您也可以调用 @value 变量。

【解决方案2】：

把你的 mixin 改成这样（关键是将它构建成一个字符串，然后使用转义值）：

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

【讨论】：