4

我如何逃避以下内容：

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

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

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

4

3 回答 3

7

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%） not 0.01。它允许padding在box-sizing属性中，但对于非 mozilla 将其过滤掉浏览器（根据此页面，其他浏览器不支持）。因此，您可以看到通过每个属性可能需要的“思考”是有益的，因此必须为每个属性设置不同的模式匹配混合可能很有价值。

较少的

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

梯度输出示例取自此处找到的示例。

于 2013-02-18T19:15:10.537 回答
4

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

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

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

我写了一些关于它回答这个问题的更多信息，这几乎是一个精确的复制：

在 LESS 中的属性名称中使用变量（动态属性/属性名称插值）

编辑： 我想出了一个更优雅的解决方案，我们将一个类的动态生成的属性注入到下一个类的名称中。我在复制问题的答案中展示了一个示例。这样我们就不会生成额外的不必要的属性。

于 2013-03-15T22:37:34.717 回答
2

我只是想补充一点，您可以使用“减号”作为属性名称，解析器会忽略它，但会添加字符串的其余部分。这样你就不会得到一个空的inject:;或 inj 属性。它仍然很老套，但是嘿...... :)

.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;
于 2013-06-10T03:42:20.167 回答