2

私はそのようなことをするためのより少ない構文を探しています:

.button-default{
  background-color: rgb(100,200,250);
  :hover{
    .button-hover-effect-mixin();
  }
}
.button-warning{
  background-color: rgb(250,100,0);
  :hover{
    .button-hover-effect-mixin();
  }
}

.button-hover-effect-mixin(){
    background-color: darken(PARENT.background-color, 50%);
}

パラメータまたはグローバル変数を使用してそれを行う方法は知っていますが、ホバー効果は常に背景色を変更するように設計されているとは限りません。

4

1 に答える 1

3

.button-defaultと .button-warningが の「親」であることを意味する場合.button-hover-effect-mixin、友達は変数です:

.button-default {
    @background-color: rgb(100, 200, 250);
    background-color: @background-color;
    &:hover {
        .button-hover-effect-mixin();
    }
}

.button-warning {
    @background-color: rgb(250, 100, 0);
    background-color: @background-color;
    &:hover {
        .button-hover-effect-mixin();
    }
}

.button-hover-effect-mixin() {
    background-color: darken(@background-color, 50%);
}

この変数を のパラメータにすることもできます.button-hover-effect-mixin。&さらに、近くの:hoverセレクターを見逃さないでください (&それが展開されて.button-default :hoverいない場合、これはおそらく必要なものではありません。 Nestingを参照してください)。

そして...これが正しい方向に進み、それらの色がボタン間の唯一の違いである場合、スニペット全体を次のように書き直します:

.button(default, rgb(100, 200, 250));
.button(warning, rgb(250, 100, 0));

.button(@name, @color) {
    .button-@{name} {
        background-color: @color;
        &:hover {
            background-color: darken(@color, 50%);
        }
    }
}
于 2013-12-24T16:59:35.120 に答える