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

古いバージョン

変数を条件付きで定義する簡単な方法はわかりませんが、1 つの単語を変更して色のテーマを変更する場合は、インポート ステートメントを変更することもできます。

@import ’themes/dark.less’;
//@import ’themes/light.less’;
于 2012-09-02T20:53:09.783 に答える