これらSASS規則

Question

私はSASSを使用して、いくつかのブートストラップのルールを上書きする必要が

書くためのより良い方法：

.open>.btn-default.dropdown-toggle{ 
    background-color: transparent; 
    color: red; 

    &:focus, &:hover{ 
     background-color: transparent; 
     color: red; 
    } 

    &:active:focus{ 
     outline: 0; 
    } 
} 

これを書くためのより良い方法はありますか？繰り返しなしでbackground-colorとcolor？

あなたはこのようなミックスイン使用することができ

Answer 1

：

@mixin red-and-transparent { 
    background-color: transparent; 
    color: red; 
} 

をそして、このようにそれを使用します。

.open>.btn-default.dropdown-toggle{ 
    @include red-and-transparent; 

    &:focus, &:hover{ 
     @include red-and-transparent; 
    } 
} 

しかし、2回使用2つの性質のために、私はこれを気にし、それを放置しないだろうあなたは今それを持っています。

Answer 2

mixinに似たプレースホルダクラスを拡張できますが、出力CSSはよりクリーンです。これは、より小さなもののための推奨されるアプローチになります。プレースホルダークラスは%で始まり、CSSでは単一のクラスとして出力されませんが、それを使用するすべてのルールをグループ化して、繰り返しは発生しません。このCSSで

%red-transparent { 
    background-color: transparent; 
    color: red; 
} 
.open>.btn-default.dropdown-toggle{ 
    @extend %red-and-transparent; 

    &:focus, &:hover{ 
     @extend %red-and-transparent; 
    } 
} 

結果

.open > .btn-default.dropdown-toggle, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover { 
    background-color: transparent; 
    color: red; 
}