使用 LESS 变量作为 CSS 属性答案

【问题标题】：Using LESS variables as CSS properties使用 LESS 变量作为 CSS 属性
【发布时间】：2012-10-17 21:23:57
【问题描述】：

我有一个可以将 px 转换为 em 的 mixin：

.margin(@target: @targetsize, @basefont: @em){
    margin:(@target / @basefont) + 0em;}

我想更改那个 mixin，以便将 CSS 边距属性替换为一个变量。例如：

.pxtoem(@target: @targetsize, @basefont: @em, @property: @property){
@property:(@target / @basefont) + 0em;

}

所以我可以这样称呼它，例如：

.pxtoem(2,1,margin-bottom);

这可能吗？如果可以，怎么做？

谢谢:)

【问题讨论】：

【解决方案1】：

当时没有，但有一个open issue。

【讨论】：

【解决方案2】：

来自较少的文档：

参数 mixin 的参数也可以有默认值：

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

【讨论】：

这不是我想要的。在您的示例中，您使用 @radius 变量作为提供给 CSS 属性的值。我希望替换属性（在您的示例中为border-radius、-moz-border-radius 或-webkit-border-radius），而不是值（在您的示例中为5px）。

【解决方案3】：

在搜索相关内容时发现了这一点，并注意到它尚未更新。

.setProp(@prop,@val) {
  @{prop}:@val
}

.foo {
  .setProp(opacity,0.75);
}

【讨论】：