4

テーマピッカーのようなものを作りたいです。私はLESS.cssを使用しています。

LESS.cssには、主な色を含む変数があります。

@colorOne: #222;
@colorTwo: #fff;
@darkGradientStart: lighten(@colorOne, 10%);
@darkGradientStop: lighten(@colorOne, 5%);
@lightGradientStart: @colorTwo;
@lightradientStop: darken(@colorTwo, 7%);

タグに次のような色クラスがある場合は、それらを変更したいと思います。

<body class='theme-blue'>

次に、これをless.cssに書き込みました（デフォルト変数の後）

.theme-blue{
    @colorOne: blue;
}

ただし、デフォルトの＃222を使用します。上書きされません。

どうすればこの問題を解決できますか？

ありがとう

4

3 に答える 3

9

LESS（同じスコープ内）の変数を上書きすることはできません。ドキュメントには具体的に次のように書かれています。

LESSの変数は、一度しか定義できないという点で実際には「定数」であることに注意してください。

あなたが望むもののために、あなたはミックスインをする必要があります：

LESSコードの例

.colorDefs(@c1: #222, @c2: #fff) {
    @colorOne: @c1;
    @colorTwo: @c2;
    @darkGradientStart: lighten(@colorOne, 10%);
    @darkGradientStop: lighten(@colorOne, 5%);
    @lightGradientStart: @colorTwo;
    @lightGradientStop: darken(@colorTwo, 7%);
}

.theme-blue {
    //import color definitions 
    .colorDefs(blue, yellow);

    // use them 
    color: @colorOne;
    background-color: @colorTwo;

    .gradient1 {
        background-image: linear-gradient(top, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @lightGradientStop);
    }
}


.theme-green {
    //import different color definitions
    .colorDefs(green, red);

    // use them 
    color: @colorOne;
    background-color: @colorTwo;

    .gradient1 {
        background-image: linear-gradient(top, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @lightGradientStop);
    }
}

CSS出力の例

.theme-blue {
  color: #0000ff;
  background-color: #ffff00;
}
.theme-blue .gradient1 {
  background-image: linear-gradient(top, #3333ff, #1a1aff);
}
.theme-blue .gradient1 {
  background-image: linear-gradient(top, #ffff00, #dbdb00);
}
.theme-green {
  color: #008000;
  background-color: #ff0000;
}
.theme-green .gradient1 {
  background-image: linear-gradient(top, #00b300, #009a00);
}
.theme-green .gradient1 {
  background-image: linear-gradient(top, #ff0000, #db0000);
}

4K（つまり多くの）コード行を解く

ed1nh0は、色変数を使用して4K行のコードがあり、「それをミックスインに入れる」ことができないことについてコメントしました。それについていくつかコメントさせてください。

  1. 4K行のコードが色を定義するためにbodyクラスに依存している場合は、各色を独自のcssファイルに分割し、必要に応じてそのファイルのみをロードする（つまり、すべてのコード色を1つのファイルにグループ化しない）のがおそらく最善です。次に、これは、ボディクラスによって色を本当に制御したいかどうかに疑問を投げかけます。
  2. 1.で推奨されていることを実行するかどうかに関係なく、色を使用する4Kのラインでこれを処理できると思います。問題は、ミックスインを使用して色の値自体を定義することではなく（つまり、色変数定義の4K行ではなく）、色を使用している繰り返しが必要なプロパティやクラスなどの4K行にあると思います。しかし、その繰り返しは、すべてをミックスインでラップすることによっても同じように簡単に処理できます。したがって、上記の私の元の答えは、これにさらに抽象化することができます（これ.colorDefsは上記と同じであり、ここでは繰り返されないことに注意してください）：

以下

.themeProperties() { // Imagine inside here the 4K lines of code
    // use them 
    color: @colorOne;
    background-color: @colorTwo;

    .gradient1 {
        background-image: linear-gradient(top, @darkGradientStart, @darkGradientStop);
    }

    .gradient1 {
        background-image: linear-gradient(top, @lightGradientStart, @lightGradientStop);
    }
}

.theme-blue {
    //import color definitions 
    .colorDefs(blue, yellow);
    .themeProperties(); //4K lines repeated here
}

.theme-green {
    //import different color definitions
    .colorDefs(green, red);
    .themeProperties(); //4K lines repeated here
}

上記は、プロパティによる変数の使用方法に違いはなく、それらのプロパティの値が何であるかを前提としています。「違い」がある場合は、特定の状況でいくつかの微調整ミックスインを実行する必要があるかもしれませんが、その概念は引き続き有効です。

于 2012-07-25T00:56:18.203 に答える
0

あなたがしていることはcssでこのようにコンパイルされます：

.theme-blue{
    #222: blue;
}

なぜ今は機能しないのか分かりますか？:)

カラースタイルを上書きしようとしている場合は、通常のcssの方法で行う必要があります。

.theme-blue{
    color: blue;
}
于 2012-07-22T10:49:09.533 に答える
0 
@blue:#0000FF;
@green:#00FF00;

.theme-blue {
    color:@blue;
}
.theme-green {
    color:@green;
}
于 2012-07-22T10:54:00.210 に答える