45

サイトのさまざまなページで使用されている3つの別々の配色があるとします。各色には、明るい、中程度、暗い色合いが定義されており、配色はボディのクラスによって定義されます。「赤」の配色がデフォルトであると想定します。このような：

色の定義：

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

基本的なデフォルトスタイルの例

body { background-color: @red-dk;
  #container { background-color: @red-md;
     p { color: @red-dk; }
  }
}

異なる配色スタイルの例

body.green { background-color: @green-dk;
  #container { background-color: @green-md;
     p { color: @green-dk; }
  }
}

各スキームのすべてのカラーバリエーションを書き直す必要がないように変数を使用したいので、次のように書くことができます。

body.[color-var] { background-color: @[color-var]-dk;
  #container { background-color: @[color-var]-md;
     p { color: @[color-var]-dk; }
  }
}

…しかし、それを達成する方法に頭を悩ませることはできません。ヘルプ…？

4

5 に答える 5

80

補間とエスケープ、セレクターの括弧、およびパラメトリックミックスインを使用して、目的の効果を取得します。

  • 補間による動的変数：文字列で"@{variable}"は、変数の値に置き換えられます。それらはネストすることもできます：与えられた@{@{var}-foo}と@var: bar;、結果は"barfoo"です。
    結果の値は引用符で囲まれています。これらの引用符を削除するには、プレフィックスを付けます~。
  • セレクター補間によるダイナミックセレクター：body.@{var}に変わりますbody.bar。

例：

@red-md:   #232;
@red-dk:   #343;

.setColor(@color) {
    body.@{color} { background-color: ~"@{@{color}-dk}";
        #container { background-color: ~"@{@{color}-md}";
         p { color: ~"@{@{color}-md}"; }
      }
    }
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..

になる：

body.red {
  background-color: #334433;
}
body.red #container {
  background-color: #223322;
}
body.red #container p {
  color: #223322;
}

注：回答が最初に作成されたとき、セレクター補間は存在しませんでした。古いLESSコンパイラ（LESS 1.3.1aより前）を使用している場合は、解決策について以前のリビジョンを参照してください。古いメソッドのサポートは、LESS1.4.0で削除されます。

于 2012-06-25T22:35:00.923 に答える
8

それらの値が実際にそのような予測可能な形式に従っている場合は、パラメトリックミックスインの完璧なケースのようです：

以下：

@red:   #232;
@green: #565;
@blue:  #898;


.theme (@color) {
  background-color: @color - #111;
  #container {
    background-color: @color;
    p { color: @color + #111; }
  }
}

body.red {
  .theme(@red);
}

コンパイルされたCSS：

body.red{background-color:#112211;}
body.red #container{background-color:#223322;}
body.red #container p{color:#334433;}
于 2012-06-25T23:35:23.847 に答える
5

私はこの質問がかなり古いことを知っています、しかしこの投稿に来るそれらのために私の答えは多分助けることができます

これを何に使用したいかはよくわかりませんが、私の提案の1つは@ScottSの回答に基づいています。私の現実の世界では、いくつかのブランドを表示し、各ブランドが独自のテキストの色や背景などを持っているWebアプリを作成する必要があります...そこで、私はLESSでこれを達成する方法を追い始めました。 SASSで簡単に実行でき、結果は次のとおりです。

以下

// Code from Seven Phase Max
// ............................................................
// .for
.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i)                  {.-each(extract(@array, @i))}


// Brands
@dodge : "dodge";
@ford : "ford";
@chev : "chev";

// Colors
@dodge-color : "#fff";
@ford-color : "#000";
@chev-color : "#ff0";

// Setting variables and escaping than
@brands: ~"dodge" ~"ford" ~"chev";

// Define our variable   
.define(@var) {
  @brand-color: '@{var}-color';
}

// Starting the mixin
.color() {
    // Generating the loop to each brand
    .for(@brands); .-each(@name) {
        // After loop happens, it checks what brand is being called
        .define(@name);
         // When the brand is found, match the selector and color
        .brand-@{name} & {
            color: @@brand-color;
        }
    }
}

.carColor {
    .color();
}

結果は次のようになります。

CSS

.brand-dodge .carColor {
    color: "#fff";
}
.brand-ford .carColor {
    color: "#000";
}
.brand-chev .carColor {
    color: "#ff0";
}

これは非常にトリッキーで、必要なものを取得するためにいくつかの要素を使用する必要がありました。最初に、Seven Phase Maxが提供するミックスインのセットを使用しました。ここで見つけることができます。それよりも、@ScottSの答えは私のパズルに欠けていた部分でした。 ...これが、別の変数の一部となる一連の変数を作成し、より動的な少ないファイルを作成する必要があるあなたや他の人に役立つことを願っています。

私のコード全体をコピーして、http：//lesstester.com/でテストできます。

于 2014-05-22T20:17:37.457 に答える
1

これを試して

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

@color: 'red-lt';

div{
background: @@color;
border: 1px solid lighten(@@color,20%);
}
于 2014-01-02T22:01:16.657 に答える
0

私の知る限り、変数変数名はLESSではサポートされていません。ただし、よりセマンティックな方法で宣言を再構築することはできます。

/* declare palette */
@red-lt:   #121; 
@red-md:   #232; 
@red-dk:   #343; 
@green-lt: #454; 
@green-md: #565; 
@green-dk: #676; 
@blue-lt:  #787; 
@blue-md:  #898; 
@blue-dk:  #909; 

/* declare variables based on palette colors */
@lt: @red-lt;
@md: @red-md;
@dk: @red-dk;

/* ...and only use them for main declarations */
body { background-color: @dk;        
  #container { background-color: @md;        
     p { color: @dk; }        
  }        
}

これにより、明示的な色の参照を回避することで、非常に簡単にパレットを切り替えることができます。

于 2012-06-25T23:00:29.720 に答える