3

LESS を使用する場合、他のクラス プロパティに基づいて新しいクラスを作成するために、クラスを混在させると便利であることがわかりましたが、それらをオーバーライドする必要がある場合もあります。

お気に入り：




.btn {
  border-radius: 10px;
  background-color: blue;
  font-size:10px;
}

.btn_warning {
  .btn;
  background-color: yellow;
  font-size: 12px;
}

出力には重複したプロパティがあります。 




.btn {
    border-radius: 10px;
    background-color: blue;
    font-size:10px;
}

.btn_warning {
    border-radius: 10px;
    background-color: blue; 
    font-size:10px; 
    background-color: yellow;
    font-size: 12px;
}

これには複数のアプローチがあることを知っています.domの複数のクラス、または@extendで複数のセレクターを構築するなどですが、ナビゲーターは実行時にプロパティをオーバーライドします。

ミックスイン時に同じプロパティを複製する理由はありますか? プロパティの「独立した」グループを作成する簡単な方法のように見えますが、値が重複している場合は適切ではありません。

4

2 に答える 2

6

LESS は、ブロック内の重複するプロパティの削除を考慮していません。これは、少なくとも部分的には、ここに記載されている理由によるものです(文法修正のために引用をわずかに変更)。

問題は、人々が古いブラウザーにフォールバックを提供するために複数のプロパティを頻繁に使用することです。プロパティを削除することは、一般的に行うのが良いことではありません。

複製のためにプログラムしないことは、プログラマーに任されています。Danny Kijkov が回答で指摘したような基本的な mixin を設定できます。または...

解決策 #1 (複雑ですが、完全に定義するには強力です)

マスター ボタン メーカーの mixin を構築する際に精巧になることができます。このようなもの：

LESS (ミックスイン)

.makeBtn(@ext: null; @rad: 10px; @color: blue; @size: 10px;) {
  .set-extension() when (@ext = null) {
    @class-extension: ~'';
  }
  .set-extension() when not (@ext = null) {
    @class-extension: ~'_@{ext}';
  }
  .set-extension();

  .btn@{class-extension} {
    border-radius: @rad;
    background-color: @color;
    font-size: @size;

    //define various addtions based on extensions here
    .specialExtensionProps() when (@ext = danger) {
      border: 3px solid red;
    }
    .specialExtensionProps() when (@ext = someExtName) {
      my-special-prop: yep;
    }
    .specialExtensionProps();
  }  
}

LESS (Mixin のさまざまな使い方)

.makeBtn(); //makes base button
.makeBtn(warning; @color: yellow; @size: 12px); //makes modified button 
.makeBtn(danger; @color: red;); //makes modified button
.makeBtn(someExtName, 15px); //makes modified button

CSS出力

.btn {
  border-radius: 10px;
  background-color: #0000ff;
  font-size: 10px;
}
.btn_warning {
  border-radius: 10px;
  background-color: #ffff00;
  font-size: 12px;
}
.btn_danger {
  border-radius: 10px;
  background-color: #ff0000;
  font-size: 10px;
  border: 3px solid red;
}
.btn_someExtName {
  border-radius: 15px;
  background-color: #0000ff;
  font-size: 10px;
  my-special-prop: yep;
}

ご存じない場合は、mixin 変数のセットから一部の変数のみを設定する上記の LESS 機能に注意してください。したがって、最初の 2 つの特殊.makeBtn()な呼び出しでは、変数名を明示的に呼び出して設定することにより (例: )、mixin から順不同でいくつかの変数のみを設定します@color: yellow。これにより、 の設定を「スキップ」できます@size。最後の例では、最初の 2 つの値のみを設定していたので、変数名を入れる必要はありませんでした。

上記があなたが望むものを得るのに役立つかどうかはわかりませんが、コードサイズを削減できる別の方法を提供します.

解決策 2

あなたは言及:extend()しましたが、重複を避けるためにここでうまく使用できます：

以下

.btn {
  border-radius: 10px;
  background-color: blue;
  font-size:10px;
}

.btn_warning {
  &:extend(.btn);
  background-color: yellow;
  font-size: 12px;
}

CSS出力

.btn,
.btn_warning {
  border-radius: 10px;
  background-color: blue;
  font-size: 10px;
}
.btn_warning {
  background-color: yellow;
  font-size: 12px;
}

解決策 3

あなたの場合、すべてのボタンがクラス.btnまたは.btn_SOMETHINGフォームのいずれかであり.btn_、ボタン以外に使用していない場合、CSS カスケードを使用してスタイルを適用し、CSS コードの重複を防ぐことができる場合があります。 (特別な LESS は必要ありません):

LESS と CSS の出力

.btn, [class *= btn_] {
  border-radius: 10px;
  background-color: blue;
  font-size:10px;
}

.btn_warning {
  background-color: yellow;
  font-size: 12px;
}

クラスを含むすべての html は、btn_warning最初に属性セレクターからベース ボタン スタイルを取得しますが[class *= btn_]、実際のbtn_warningクラスは、オーバーライドされるように設定されたものをオーバーライドします。

解決策 4

クラス名を html で分割すると (class="btn warning"ではなくclass="btn_warning")、重複を避けるために機能します。

LESS と CSS の出力

.btn {
  border-radius: 10px;
  background-color: blue;
  font-size:10px;
}

.btn.warning {
  background-color: yellow;
  font-size: 12px;
}
于 2013-09-20T19:16:42.520 に答える
3

このソリューションはどうですか？

.btn(@size: 10px, @color:blue) {
    border-radius: 10px;
    background-color: @color;
    font-size:@size;
}

.btn_warning {
    .btn(12px, yellow);
}
于 2013-09-17T00:34:58.973 に答える