LESS CSS使用不同的前缀逃避整个CSS规则？

Question

我如何逃避以下事项:

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

我已经尝试了一些不同的方法,将它包装起来~"stuff",包含变量@{var},反复使用-...没有成功!

编辑:在Github上有一个拉动请求:https://github.com/cloudhead/less.js/pull/698

Answer 1

更新LESS 1.6+

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

减

.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会这样做).

然而,模式匹配需要用于LESS并不完全是坏事,因为它迫使人们思考模式匹配可能需要的差异,并适应代码中的这些差异.

以下面的例子为例.它需要两个变量,并且(目前)允许另外两个变量(这里,对于具有背景图像的渐变).如果需要,可以扩展它以允许更多额外变量.

请注意每个嵌套的mixin如何将不同类型的事物传递给第二个和后面的变量,并且每个变量都可以以不同的方式预处理这些变量.下面的示例允许opacity作为十进制值或数字整数传递(尽管值1将假定十进制值1.0(即100%)不是0.01.它允许padding在box-sizing属性中,但过滤为非mozilla浏览器(根据此页面在其他浏览器中不支持).因此,您可以看到"思考"每个属性可能需要的内容是有益的,因此必须为每个属性设置不同的模式匹配mixin是有价值的.

减

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

从此处找到的示例中获取的梯度输出示例.