css - 我可以使用依赖于其他变量的变量创建 Less 颜色主题吗？

Question

有人知道如何做我在这里尝试做的事情吗？

#theme (dark)  {@primary: black;}
#theme (light) {@primary: white;}
#theme (@_)    {@primary: yellow;}

@name: dark;
#theme(@name);

.rule {
  color: @primary;
}

我正在尝试定义一些“主题”，这些主题将具有(可能)将在各种 Less 文件中使用的颜色和图像。过去，我在全局范围内定义它们并注释掉未使用的那些，但我想看看是否有人在 Less 中找到了比我所拥有的更好的策略。

我曾一度发现一个功能曾经是(？)Less 的一部分，但它似乎不起作用。

.theme {
  @color: red;
}

.rule {
  color: .theme > @color;
}

如果可行，那就太好了。

Answer 1

在使用了 LESSCSS 之后，我想出了一个合理的方法来根据单个 @theme 变量更改所有变量。

诀窍是使用 variable interpolation指定 variable reference to a variable .

//this can be either "dark" or "light"
@theme: dark;

@theme-primary: "@{theme}-primary"; //this will evaluate to "dark-primary"
@theme-secondary: "@{theme}-secondary"; //this will evaluate to "dark-secondary"

@dark-primary: #F00;
@dark-secondary: #000;

@light-primary: #333;
@light-secondary: #FFF;

body {
    //@theme-secondary evaluates to "dark-secondary"
    //@dark-secondary evalutates to #000
    background-color: @@theme-secondary;
    //@theme-primary evaluates to "dark-primary"
    //@dark-primary evaluates to #F00
    color: @@theme-primary;
}

---

旧版本

虽然我不知道有条件地定义变量的简单方法，但如果您要更改一个词并更改颜色主题，您不妨更改一个导入语句:

@import ’themes/dark.less’;
//@import ’themes/light.less’;