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语句：

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

LessCSS色彩主题

1 个答案:

旧版本