LessCSS颜色主题

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变量更改所有变量。

诀窍是使用变量插值来指定对变量的变量引用。

//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’;