LESS CSS 使用不同的前缀转义整个 CSS 规则？

我如何避免以下情况：

.prefix(@rule, @prop) {
  -webkit-@{rule}: @{prop};
  -moz-@{rule}: @{prop};
  -o-@{rule}: @{prop};
  -ms-@{rule}: @{prop};
  @{rule}: @{prop};
}

我尝试了很多不同的方法，将其包装在~"stuff"，将变量包装在@{var}，反斜杠-的……没有成功！

Edit:Github 上有一个 pull req：https://github.com/cloudhead/less.js/pull/698

LESS 1.6+ 更新

你原来的计划几乎可以用LESS 1.6 更新。这是所需的语法：

LESS

.prefix(@rule, @prop) {
  -webkit-@{rule}: @prop;
  -moz-@{rule}: @prop;
  -o-@{rule}: @prop;
  -ms-@{rule}: @prop;
  @{rule}: @prop;
}

.test {
  .prefix(box-sizing, border-box);
}

CSS 输出

.test {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

尽管如此我关于属性值的其他预处理的原始答案仍然有效。

原始答案（1.6 之前）

LESS 不允许动态属性（是的，我相信 SASS 允许）。

However，这并不完全是一件坏事模式匹配需要用于 LESS，因为它迫使人们思考差异这可能是模式匹配所需要的，并在代码中适应这些差异。

以下面为例。它需要两个变量，并且（目前）允许另外两个变量（此处为带有背景图像的渐变）。如果需要的话，它可以扩展以允许更多额外的变量。

请注意每个嵌套 mixin 如何期望将不同类型的事物传递给第二个及后面的变量，并且每个嵌套 mixin 都可以以不同的方式预处理这些变量。下面的例子允许opacity作为十进制值或数字整数传递（尽管值1将假定十进制值为1.0（即 100%）不0.01。它允许padding in the box-sizing属性，但会针对非 Mozilla 浏览器（其中根据此页面，其他浏览器不支持）。因此，您可以看到，“思考”每个属性可能需要什么是有益的，因此必须为每个属性设置不同的模式匹配 mixins 可能很有价值。

LESS

.prefix(@prop, @v1, @v2:~'', @v3:~'') {
  .prop(opacity) {
    @decValue: `(@{v1} > 1 ? @{v1}/100 : @{v1})`;
    @intValue: `(@{v1} <= 1 ? @{v1}*100 : @{v1})`;
    filter: alpha(opacity=@intValue);
    -webkit-opacity: @decValue;
    -moz-opacity: @decValue;
    opacity: @decValue;
  }
  .prop(boxSize) {
    @filteredSupport: ~`("@{v1}" == "padding" ? "border" : "@{v1}")`;
    -webkit-box-sizing: (~"@{filteredSupport}-box");
    -moz-box-sizing: (~"@{v1}-box"); 
    box-sizing: (~"@{filteredSupport}-box");
  }
  .prop(bkgGradient) {
    .filterFirstTwoArgs(@type, @color, @gradient) {
      background-color: @color; 
      background-image: ~"-webkit-@{type}-gradient(@{gradient})";
      background-image: ~"   -moz-@{type}-gradient(@{gradient})";
      background-image: ~"    -ms-@{type}-gradient(@{gradient})";
      background-image: ~"     -o-@{type}-gradient(@{gradient})";
      background-image: ~"        @{type}-gradient(@{gradient})";
    }
    .filterFirstTwoArgs(@v1, @v2, @v3);
  }
  .prop(@prop);
}

Use it:

.myClass {
  .prefix(opacity, 10);
  .prefix(boxSize, padding);
  .prefix(bkgGradient, linear, #F07575, "top, hsl(0, 80%, 70%), #bada55"); 
}

CSS 输出

.myClass {
  filter: alpha(opacity=10);
  -webkit-opacity: 0.1;
  -moz-opacity: 0.1;
  opacity: 0.1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: padding-box;
  box-sizing: border-box;
  background-color: #f07575;
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55);
  background-image:         linear-gradient(top, hsl(0, 80%, 70%), #bada55);
}

梯度输出示例取自示例在这里找到.