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

我尝试了一堆不同的方式，将其包装在〜stuff，将变量包装到 @ {var} 中，反斜杠 - 的...没有成功！

编辑：在Github上有一个拉需求： 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 ）。

然而 ，这不是一件坏事，模式匹配需要用于LESS，因为它迫使人们通过差异来思考可能需要模式匹配，并适应您的代码中的这些差异。

以下列为例。它需要两个变量，（目前）允许两个变量（这里，对于具有背景图像的渐变）。如果需要，可以扩展它以允许更多的额外变量。注意每个嵌套mixin如何预期将不同类型的东西传递给第二个和后来的变量，每个都可以以不同的方式预处理这些变量。以下示例允许将 opacity 作为十进制值或数字整数传递（虽然值 1 将假设小数值 1.0 （即100％）不 0.01 它允许在 box-sizing 属性中填充，但过滤掉非mozilla浏览器（其中根据本页不支持其他浏览器），所以你可以看到思考通过每一个财产可能需要是有益的，因此必须为每个组合设置不同的模式匹配mixin。

LESS

  .prefix（@prop，@ v1，@ v2：〜''，@ v3：〜''）{
 .prop不透明度）{
 @decValue：`（@ {v1}> 1？@ {v1} / 100：@ {v1}）`; 
 @intValue：`（@ {v1} 1？@ {v1} * 100：@ {v1}）`; 
过滤器：alpha（opacity = @ intValue）; 
 -webkit-opa城市：@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 {
过滤器：alpha（opacity = 10）; 
 -webkit-opacity：0.1; 
 -moz-opacity：0.1; 
不透明度：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）; 
} 
  

从示例在这里找到。

How do i escape the following:

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

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

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

解决方案

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 Output

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

Nevertheless my original answer about other preprocessing of the property values still holds.

Original Answer (pre 1.6)

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

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.

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.

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 Output

.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屋！