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 中使用变量来定义赋值的左侧是不可能的。

但是你可以使用 parametric 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);
}