変数とCSSを減らすことは可能でしょうか、どうすれば同じようなことができますか？

Question

私は同じコードブロックを2つの異なる変数で繰り返しました。このコードブロックは何度も何度も繰り返されていますので、私はこのスタイルシートを管理するのを手伝いたいと考えていました。これをLESSCSSに変換します。

私はかなり新しいCSSですが、コンパイルエラーが発生しているので、私がしようとしていることは、私がそれに近づいているようにはできないと思います。

.item(@name,@loc) { 
    @name .icon { background: url(..) -24px @loc no-repeat; } 
    .theme-purple @name .icon { background: url(..) 0 @loc no-repeat; } 
    .theme-green @name .icon { background: url(..) -48px @loc no-repeat; } 
    .theme-yellow @name .icon, 
    .theme-orange @name .icon { background: url(..) -72px @loc no-repeat; } 
    .theme-red @name .icon { background: url(..) -96px @loc no-repeat; } 
} 

.item('type',-24px); 

これは何か可能ですか？

Answer 1

もうすぐです。最初の問題は変数の使用です。 @argumentsを見る必要があります。私はあなたが（おそらくスプライトのためのいくつかのコード）を達成しようとしているのかについての明確な100％でないんだけど、私はあなたに例を挙げてみましょう：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { 
    box-shadow: @arguments; 
    -moz-box-shadow: @arguments; 
    -webkit-box-shadow: @arguments; 
} 

.box-shadow(2px, 5px); 

あなたの変数を設定し、そうでない場合は、デフォルトが続きます指定された。次に、@引数を使用してmixinに配置します。これは単なる背景画像なので、あなたは1つしか持っていません。そのミックスインを特定のセレクタに適用します。

mixinとして使用するセレクタ内にmixinを配置しようとしているようですが、これは不可能です。さまざまな理由で、セレクタ内のセレクタ内に変数を配置することもできません。最も重要なのはスコープです。変数はLESSの定数なので、一度ローカルグローバル変数を設定すると変更できません。

多分、このようにそれを行うために容易になるだろう：

.sprite (@path: url(..), @loc1: 0, @loc2: 0, @repeat: no-repeat;) { 
     background: @arguments;   
} 

.foo { 
     .sprite('url(..)', -96px, -24px); 
} 

万一出力：

.foo { 
     background: url(..) -96px -24px no-repeat; 
} 

あなたはいつも意志ので、あなたは、LESS引数の最初のパラメータをスキップすることはできません覚えておいてくださいこの例ではURLを宣言する必要があります。