SASS는 루트에서만 확장

Question

나는 최근에 SASS의 땅에서 "물건"을 만났습니다. 그리고 어쩌면 너희들은 속임수를 아는 사람이나 똑같은 것을 알고 있을지 모른다.

이 클래스는 .icon입니다. 여기에는 내 아이콘에 대한 기본적인 스타일이 포함되어 있습니다 (iconfont에 사용). 이 아이콘들은 내가 원할 때마다 마크 업에 넣을 수 있습니다. 예 : button 그러나 버튼 안에는이 아이콘이 약간의 추가 스타일링이 필요합니다. 그래서 다음을 수행하십시오

.icon { 
    // Basic styling 
} 

button { 
    .icon { 
    // Additional styling 
    } 
} 

그것은이 CSS로 컴파일 : 지금까지 확인

.icon { 
    // Basic styling 
} 

button .icon { 
    // Additional styling 
} 

다. 하지만 지금은 너무 좋아 내 모든 .foo 요소의 내부에 후 요소에 .icon을 확장하려는 :

.foo:after { 
    @extend .icon; 
} 

을 지금은이 CSS로 컴파일 :

.icon, .foo:after { // This is good, exactly what I want 
    // Basic styling 
} 

button .icon, button .foo:after { // But I don't need the second half of this line 
    // Basic Additional 
} 

이제 foo는 요소 ISN ' "루트"아이콘 - 클래스뿐만 아니라 아이콘 - 클래스 언더 버튼과 모든 추가 스타일링을 확장합니다. 그러나 나는 그것을 필요로하지 않는다. 그 요소가 그 추가 스타일을 가지기를 바랄뿐입니다. 아직 문제는 발생하지 않습니다. 그러나 어쩌면 그럴 수도 있습니다. 따라서 .icon을 루트에서 확장하고 에 중첩 된 .icon을 생략하고 나중에 다른 요소에 중첩 된 아이콘 클래스를 나중에 추가하는 것이 가능한지 궁금했습니다.

나의 첫 번째 생각은 %icon과 같은 abstact 클래스를 사용하고 그로부터 확장했지만 위의 아이콘 클래스와 파일은 grunt-webfont에 의해 생성됩니다. 따라서 나는 아이콘 클래스 스타일을 항상 겹쳐서 바꿀 수는 없습니다.

어떻게해야합니까? 내가 알지 못하는 SASS의 확장 기능에 더 많은 것이 있습니까? 아니면 완전히 다른 방법이 있습니까?

도움 주셔서 감사합니다.

해결책 : 모든 멋진 도움과 내가이 문제를 방지하는 방법을 발견 팁을 사용

는 : 그런트 - Webfont는 아이콘을 표시합니다 i-tag를 사용하여 제안합니다. Font-Awesome도 똑같습니다. 그래서, 나는 그것을 정확하게하고 있습니다. 그리고 저는 대개 다른 용도로 사용하지 않습니다. 이렇게하면 .icon 클래스가 아닌 button 아래의 i-tag을 추가로 사용할 수 있습니다. 이렇게하면 .icon 클래스는 생성 된 파일에서 한 번만 사용 된 다음 다시는 사용되지 않습니다.

.icon { 
    // Basic styling 
} 

button { 
    i { // <= Previously '.icon' 
    // Additional styling 
    } 
} 

Answer 1

내가 생각 이 당신이 찾고있는 결과를 얻을? 조금 어리석게도.

방법 : 자리 표시 자 스타일을 만들고이를 .icon으로 확장하여 시작합니다.

.icon, .foo:after, button .icon { 
    basic: styling; 
} 

button .icon { 
    additional: styling; 
} 

Answer 2

는이 같은 일을 시도 해 봤나 :

%icon-styles{ 
    basic: styling; 
} 

.icon { 
    @extend %icon-styles; 
} 

.foo:after { 
    @extend %icon-styles; 
} 

button .icon { 
    @extend %icon-styles; 
    additional: styling; 
} 

그것은으로 컴파일?

.icon { 
    //some styles from external (ie: grunt webfont) 
    color: red; 
} 

%icon { 
    @extend .icon; 
} 

button { 
    .ico { 
    @extend %icon; 
    //add some additional styles 
    } 
} 

.foo:after { 
    @extend %icon; 
    //add some more 
} 

그런 다음 foo는 발생하지 않도록 것 : 버튼 내부의 .icon에 대한 규칙 후.

EDIT2 - 스타일 내부에서 사용할 수있는 추가 클래스를 만들어야하므로 .icon 클래스가 하나만 정의되어 있습니다 (grunt-webfont generated css). 그런 다음 스타일 내에서 .ico 클래스를 사용하고 위에 표시된 것처럼 % 아이콘 자리 표시자를 확장하십시오.

EDIT - grunt-webfont 생성기에서이 문제를 해결할 생각이 있으십니까? documentation에서 , 당신과 같이 SCSS하는 출력을 설정할 수 있습니다 보인다

options: { 
     stylesheet: 'scss', 
     mixinPrefix: 'mixin-' 

그럼 그냥 원하는 클래스의 스타일을 정의 할 수있는 믹스 인을 사용할 수 있습니까?

Answer 3

grunt-webfont와 함께 맞춤 템플릿을 사용할 수도 있습니다. 그것은 생성 된 CSS에 대해 훨씬 더 많은 컨트롤을 제공 할 것입니다.