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

Question

我如何转义以下内容:

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

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

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

Answer 1

LESS 1.6+ 更新

您的原始计划几乎适用于 the LESS 1.6 update .这是所需的语法:

少

.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 允许)。

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

以下面为例。它需要两个变量，并且(目前)允许另外两个变量(这里是带有背景图像的渐变)。如果需要，它可以扩展以允许更多额外的变量。

请注意每个嵌套的 mixin 如何期望将不同类型的东西传递给第二个和后面的变量，并且每个都可以以不同的方式预处理这些变量。下面的示例允许 opacity作为十进制值或整数传递(尽管 1 的值将假定为 1.0 的十进制值(即 100%)而不是 0.01 。它允许 padding 在 box-sizing 中property，但为非 mozilla 浏览器(according to this page is not supported in other browsers)过滤掉它。所以你可以看到“思考”每个属性可能需要的东西是有益的，因此必须为每个设置不同的模式匹配 mixins 是有值(value)的.

少

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

使用它:

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

梯度输出示例取自示例 found here .