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> 

의입니다 . 내 버튼 중 하나에 특수 클래스가있는 경우 .button-large 클래스가 우선합니다. 나는 그런 대신 .special 값의 .button-large 값을 얻을 것이다 .special 및 .button-large 사이에 다른 어떤 속성을

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

을 할 경우 즉,이다. 나는 이것을 반대가되기를 원한다. .special이 여기에서 이깁니다. (실세계의 예로서, .special는 "기본"버튼 색상을 설정할 수 있습니다). 기준점으로 https://jsfiddle.net/wwr63qmv/3/

, Bootstrap button groups 피하기 클래스를 요구하여이 문제가 아니라 버튼 그룹에 비해, 각 버튼에 개별적으로 설정할 수 :

찾는 문제를 나타내는 jsfiddle이다. 그것이 유일한 대답 일 수 있습니다. 여기에서 .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로 클래스가 버튼을 대상으로됩니다. 첫 번째 선택기의 특수성은 013입니다 (전체 복합 선택기의 일부로 1 개의 클래스 및 3 개의 유형 선택기가 있기 때문에). 반면에 두 번째 선택기의 선택기는 010입니다 (단 하나의 클래스 선택기 만 있기 때문에). 따라서 기본적으로 첫 번째 선택기가 이기고 지정된 속성 만 요소에 적용됩니다.

.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을 확장하는 것입니다!

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