2

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

#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;
}

这将是伟大的，如果它工作。

4

1 回答 1

5

在稍微弄乱了 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’;
于 2012-09-02T20:53:09.783 回答