javascript - 用于键名更改的 CSS 变量更少？

Question

我是新手LESS CSS。

在我的LESS CSS代码中。只是例子。

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

@block
{
    @name : @value
}

我想要这个输出

body
{
    color : #99CC00
}

是否可行？如果可能，请给我LESS 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));
}

Answer 1

我很确定在 LESS 中不可能使用变量来定义赋值的左侧。

但是您可以使用参数 mixin和选择器插值来完成您尝试做的至少一半。

@block: body;

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

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

编辑：

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

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

Answer 2

使用这个简单的 Less CSS mixin

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

Answer 3

在 less 中阅读关于 mixins http://lesscss.org/#-mixins的前缀，然后你可以这样做：

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

Answer 4

由于版本：1.6.0 LESS 允许 css 属性名称是一个变量。

http://lesscss.org/features/#variables-feature-properties