LESS CSS用不同的前缀逃脱整个CSS规则？ [英] LESS CSS Escape entire CSS rule with different prefixes?

问题描述

如何转义以下内容：

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

我试过了一堆不同的方法， $ c>〜stuff，将变量括在 @ {var} 中，反斜杠 - 没有成功！

I've tried a bunch of different ways, wrapping it in ~"stuff", wrapping the variables in @{var}, backslashing the -'s... no success!

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

There's a pull req for it on Github: https://github.com/cloudhead/less.js/pull/698

推荐答案

更新LESS 1.6 +

您的原始计划几乎可与 LESS 1.6更新。这是所需的语法：

Update for LESS 1.6+

Your original plan almost works with the LESS 1.6 update. This is the syntax needed:

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

不过属性值仍然有效。

LESS不允许动态属性）。

LESS does not allow dynamic properties (and yes, I believe SASS does).

但 ，模式匹配需要用于LESS，因为它迫使人们思考差异 em>可能需要模式匹配，并适应这些差异在您的代码。

However, it is not entirely a bad thing that pattern matching needs to be used for LESS instead, as it forces one to think through the differences that might be needed for pattern matching, and accommodating those differences in your code.

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

Take the following as an example. It requires two variables, and (at present) allows for two others (here, for the gradients with a background image). It could be expanded to allow for more extra variables if needed.

请注意每个嵌套mixin如何预期将不同类型的东西传递给第二个和更后的变量，每个变量都可以以不同的方式预处理这些变量。下面的示例允许 opacity 作为十进制值或数字整数传递（虽然值 1 将假定小于 1.0 （即100％）而不是 0.01 属性中的，但会过滤出非mozilla浏览器（其中根据此页面不支持在其他浏览器）。所以你可以看到思考通过什么每个属性

Note how each nested mixin expects different types of things to be passed to the second and later variables, and each one can preprocess those variables in different ways. The example below allows for opacity to be passed as either a decimal value or the numeric integer (though a value of 1 will assume a decimal value of 1.0 (i.e. 100%) not 0.01. It allows for padding in the box-sizing property, but filters that out for non-mozilla browsers (which according to this page is not supported in other browsers). So you can see that "thinking" through what each property may need is beneficial, and thus having to set up different pattern matched mixins for each can be valuable.

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

从示例中获取的渐变输出示例在这里。

Gradient output example taken from example found here.

这篇关于LESS CSS用不同的前缀逃脱整个CSS规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！