SCSSの@extendディレクティブを無効にするにはどうすればよいですか？

Question

ボタングループ内にボタンがあります。ボタングループのサイズはさまざまです（例： button-group-large。私の目標は、ボタングループのサイズを明示的に推測させることで、ボタングループ内の各ボタンのサイズを明示的に設定する必要を避けることです。

<div class="button-group-large"> 
    <button>Foo</button> 
    <button>Bar</button> 
</div> 

は、私が（SASSで）このようにそれを行うことができます：

.button-group-large { 
    button { @extend .button-large; } 
} 

これは動作しますが、次のような問題を作成することは、私はむしろこれを書くでしょう代わりに

<div class="button-group-large"> 
    <button class="button-large">Foo</button> 
    <button class="button-large">Bar</button> 
</div> 

のうち、 。 1つのボタンに特別なクラスがある場合は、.button-largeクラスが優先されます。それは私が

<div class="button-group-large"> 
    <button class="special">Foo</button> 
    <button>Bar</button> 
</div> 

をすればその後.specialと.button-largeとで異なる任意の属性が.button-large値の代わりに、.special値を取得します、です。私はこれを反対にしたい。 .specialはここで勝つはずです。 （実世界の例では、.specialは「プライマリ」ボタンの色を設定することがあります）。ここ

は問題を示すjsfiddleだ：基準点としてhttps://jsfiddle.net/wwr63qmv/3/

、Bootstrap button groupsではなく、ボタン群に比べて、各ボタンを個別に設定するクラスを要求することによってこの問題を回避します。それが唯一の答えかもしれません。ここで.specialクラスに勝つための他の方法はありますか？

Answer 1

あなたが直面している問題は、Sassまたは@extendの指令によるものではありません。 CSSの仕組みです。複数のセレクタが同じ要素を指している場合、最も特定のセレクタが勝ちます（または、その特異性が同じであれば、ファイルに定義された最新のセレクタが勝ちます）。

コンパイル時にあなたのフィドルでSCSSコードは、以下の出力を生成します：

.button, ul.button-group li button { /* check this selector */ 
    border: 1px solid black; 
    color: black; 
    border-radius: 2px; 
} 
.special-button { /* and this */ 
    border: 1px solid green; 
    color: green; 
} 
ul.button-group { 
    margin: 10px; 
} 
ul.button-group li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 5px; 
} 
p { 
    font-family: monospace; 
} 

これらのセレクタの両方 - ul.button-group li buttonと.special-buttonが.special-buttonとしてクラスを持つボタンをターゲットとします。第1のセレクタの特異性は013である（これは、1つのクラスセレクタと3つのタイプセレクタを完全な複合セレクタの一部として有するためである）一方、第2のセレクタのセレクタは010である（クラスセレクタを1つしかない）。したがって、性質上、最初のセレクタが優先され、その下で指定されたプロパティのみが要素に適用されます。

.special-buttonスタイルを適用するには、セレクタの特異性を高める必要があります。これはセレクタをul.button-group li button.special-buttonに変更するだけで可能ですが、セレクタはclass='special-button'でbuttonをターゲットにし、liのulの親がclass='button-group'であることを示します。それは非常に具体的であり、button.special-buttonがul.button-group liの外にある場合、プロパティは適用されないことを意味します。

他のオプションは、以下のようなli内も.special-buttonを拡張するために、次のようになります。

あなたは `重要rule`を使用するか、` `あなたのような特定のよう.special`作ることができます

ul.button-group { 
    margin: 10px; 
    li { 
    list-style-type: none; 
    display: inline-block; 
    padding: 5px; 
    button { 
     @extend .button; 
     &.special-button { /* note this */ 
     @extend .special-button; 
     } 
    } 
    } 
} 

Fiddle Demo