less - 您可以使用 LESS 变量作为 CSS 属性和值吗？

Question

使用 SASS，我已经能够编写使用插值创建基于变量的 mixin 的代码：

@mixin browserPrefix($property, $value) 
  -webkit-#{$property}: $value
  -moz-#{$property}: $value
  -ms-#{$property}: $value
  -o-#{$property}: $value
  #{$property}: $value

这非常灵活，因为我可以简单地编写 @include browserPrefix($property:border-radius, $value:3px) 并在编译时获取所有浏览器前缀。这包括允许多种不同的用途。

有没有办法用 LESS 做到这一点？我尝试使用 @{property} 作为替代品，但它似乎不起作用。任何建议请让我知道，对 LESS 来说很新。

Answer 1

简单的答案还没有。

但似乎它可能很快（可能在下一个 LESS 版本中）。请参阅此线程https://github.com/less/less.js/issues/36似乎@seven-phases-max 目前正在处理它（请参见此处）

所以只有一点点耐心=）

不久前，我在这里发布了一个可能的解决方法：

• 在 LESS 中的属性名称中使用变量（动态属性/属性名称插值）（有点 hacky 但它有效，同时等待 LESS 中属性插值的正式发布）

---

更新：

从 LESS 1.6 ( changelog ) 开始，可以进行属性名称插值。
你的 mixin 在 LESS 中看起来像这样：

.browserPrefix(@property; @value){
    -webkit-@{property}: @value;
       -moz-@{property}: @value;
        -ms-@{property}: @value;
         -o-@{property}: @value;
            @{property}: @value;
}