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 +

的更新

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

<强> 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会这样做）。

然而，pattern matching需要用于LESS并不是一件坏事，因为它迫使人们通过差异，并适应代码中的这些差异。

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

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

<强> LESS

box-sizing

使用它：

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

CSS输出

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

从示例found here中获取的渐变输出示例。

Answer 2

我只是想分享一些我刚刚尝试过的东西，它有效...将动态创建的供应商属性（带字符串插值）注入另一个属性值。

.vendors(@property, @value) {
    -inj:~"ect; -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}

这是一个hackish解决方案，但编译成工作css（我们注入的前面有一个额外的属性）......在less2css.org

我写了一些关于它回答这个问题的更多内容，这几乎完全是一个复制品：

Using variables in property names in LESS (dynamic properties / property name interpolation)

修改我想出了一个更优雅的解决方案，我们将一个类的动态生成属性注入到下一个类的名称中。我在answer to the replicate question中展示了一个例子。这样我们就不会产生额外的不必要的属性。

Answer 3

我只是想补充一点，你可以使用'减'作为一个名称，解析器将忽略它，但添加其余的字符串。这样你就不会得到一个空的inject:;或注意力。它仍然是hacky但是嘿......：）

.prefix(@property, @value) {
    -:~";-webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}";
}

示例：

.prefix(transition, "all .2s, color 0s");

将输出：

-webkit-transition: all .2s, color 0; -moz-transition: all .2s, color 0; -ms-transition: all .2s, color 0; -o-transition: all .2s, color 0; transition: all .2s, color 0;

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

3 个答案:

LESS 1.6 +

原始答案（前1.6）