2

次のボタン ミックスインがあります。

.Button(@type) {

  color: @White; 

  &:hover {color: @White;} // :hover

} // Button

.Button(@type) when (@type = 'Delete') {

  background-color: lighten(@Red, 20%);
  border: 1px solid lighten(@Red, 20%); 

  &:hover {
    background-color: lighten(@Red, 12%);
    border: 1px solid lighten(@Red, 12%); 
  } // :hover

} // Button

.Button(@type) when (@type = 'Search') {

  background-color: lighten(@Blue, 20%);
  border: 1px solid lighten(@Blue, 20%); 

  &:hover {
    background-color: lighten(@Blue, 12%);
    border: 1px solid lighten(@Blue, 12%); 
  } // :hover

} // Button

これは正常に機能しており、ご覧のとおり、各ボタンで変化するのは色です。

Mixin を 1 つだけ持つことが可能で、タイプに応じて色変数を定義します。

このようにすると、多くの Button mixin バージョンを使用する必要がなくなります ...

4

2 に答える 2

2

それを行う他の方法はありません。LESSの保護されたミックスインは、 if/else ステートメントの代わりにその形式を使用するように修正されました。しかし、あなたの場合、これを行うことをお勧めします:

//create a mixin for global rules.
.rules(@color){
    background-color: lighten(@color, 20%);
    border: 1px solid lighten(@color, 20%); 

    &:hover {
       background-color: lighten(@color, 12%);
       border: 1px solid lighten(@color, 12%); 
    }
}

.rulesそして、すべての CSS ルールに対して mixin を呼び出すだけです。

.Button(@type) when (@type = 'Delete') {
    .rules(@Red);
}

.Button(@type) when (@type = 'Search') {
    .rules(@Blue);
}

これはより簡単で、同じコードを書くのに多くのスペースを必要としません。お役に立てれば。

于 2013-07-26T16:03:20.313 に答える