Question

我是LESS CSS的新手。

在我的mide 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中无法使用变量来定义作业的左侧。

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

@block: body;

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

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

修改

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

.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

请参阅lessins中的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

键名更改的CSS变量较少？

4 个答案: