Javascript 更改键名的CSS变量更少？

我不熟悉

更少的CSS

在my mide

LESS CSS

code中。举个例子

@block : body;
@name  : color;
@value : #99CC00;

@block
{
    @name : @value
}

我想要这个输出

body
{
    color : #99CC00
}

可能吗？如果可能，请给我

更少的CSS

代码

这是我的问题

.browser-fix(@key,@value)
{
    -webkit-@key: @value;
    -moz-@key: @value;
    -ms-@key: @value;
    -o-@key: @value;
    @key: @value;
}

p
{
    .browser-fix(box-shadow,1px 1px 5px rgba(0,0,0,0.2) inset);
    .browser-fix(transform,rotate(30deg));
}

阅读有关在less中添加前缀的mixin的内容，然后您可以执行以下操作：

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

---

我非常确信，在更少的时间里，使用变量来定义赋值的左侧是不可能的

但您可以使用一个和一个选择器插值来完成至少一半的工作

@block: body;

.color-mixin(@value) {
    color: @value;
}

@{block} {
    .color-mixin(#99CC00);
}

编辑：

.example {
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -ms-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
}

为了解决您的问题，我个人会对每个特定于浏览器的属性进行单独的混合，因为特定于浏览器的属性并不总是与您指定的模式匹配，例如设置不透明度。单独的混音也更容易阅读

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}

.rotate(@degrees) {
    -webkit-transform: rotate(@degrees);
    -moz-transform: rotate(@degrees);
    -ms-transform: rotate(@degrees);
    -o-transform: rotate(@degrees);
    transform: rotate(@degrees);
}

// Example of an attribute that does not match the pattern.
.opacity(@opacity) {
    opacity: @opacity / 100;
    filter: ~"alpha(opacity=@{opacity})";
}

p {
    .box-shadow(1px 1px 5px rgba(0,0,0,0.2) inset);
    .rotate(30deg);
}

---

使用这个简单的CSS混合

.vender-fix(@name; @value) {
  -webkit-@{name}: @value;
  -moz-@{name}: @value;
  -ms-@{name}: @value;
  -o-@{name}: @value;
  @{name}: @value;
}

.example {
  .vender-fix(transition, width 300ms);
}

输出：

.example {
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -ms-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
}

---

因为版本：1.6.0以下允许css属性名为变量

---

为什么要这样做？对于前缀

-webkit-@name

，

-moz-@name

，

-ms-@name

来说，你想做的似乎没有多大意义。。。