Question

我想定义一个全局 LESS变量，具体取决于应用于<body>的类。

LESS可以实现吗？

这是我的mixin：

.dynamic-colors(@color) {

    //set my variable
    @c-dynamic: @color;

    //I can use my variable here
    .something {
        color: @c-dynamic;
    }
}

body.colors--black {
    .dynamic-colors(#000000);
}

body.colors--red {
    .dynamic-colors(#ff0000);
}

.something-else {
    //this returns undefined because @c-dynamic
    //was only defined inside of .dynamic-colors()
    color: @c-dynamic;
}

我相信@c-dynamic将仅限于.dynamic-colors mixin的范围。

有什么方法可以将变量设置为全局变量？

Answer 1

所以不要在没有回答的情况下留下这个。您可以通过在全局范围内调用mixin来使用mixin定义全局变量，例如：

.dynamic-colors(@color) {
    @c-dynamic: @color;
}

.dynamic-colors(#123); // expose @c-dynamic into global scope

div {
   color: @c-dynamic; // -> #123
}

但是（如上面的评论所述）这看起来并不像你真正想要达到的目的。您无法使此（或任何其他）变量值依赖于body类，因为在编译时，您不了解您的HTML将生成的CSS应用于。

根据身体类别定义Less变量

1 个答案: