SCSS : 기존 규칙에 요소 추가

Question

서로 중첩 된 일부 규칙이 있습니다. 규칙과 관련없는 다른 요소를 추가하고 싶습니다. 예를 들어 내가

#element1{ 
    display: block; 

    .sub-element1 { 
     background: yellow; 

     .sub-element2 { 
     color: red; 
     } 
    } 
} 

을 가지고 있고 나는 다른 요소를 (#이 element2) .SUB-이 element2와 동일한 규칙을 사용하는 추가하려면, 그래서 컴파일 된 코드는 다음과 같습니다

#element1{ 
    display:block 
} 
#element1 .sub-element1 { 
    background:yellow 
} 
#element1. sub-element1 .sub-element2, #element2 { 
    color: red; 
} 

가능합니까?

Answer 1

믹스 인을 사용할 수 있습니다. 그리고 단순히 어떤 선택이 믹스 인을 포함

@mixin redcolor { 
    color:red; 
} 

: 당신은 믹스 인 규칙을 추가 할 수 있습니다, 당신이 그들을 원하는 유지 mixin을 포함

.subelement2, #element2 { 
    @include redcolor; 
} 

여기 유지 mixin에 대한 자세한 : http://sass-lang.com/guide

Answer 2

을

@extend을 사용하십시오.

#element2 { 
    @extend .sub-element2 
} 

그러나 또한 선택 체인을 복사합니다 이것에 의해 생성 된 출력, 그래서이 출력 될 것입니다 :

#element1. sub-element1 .sub-element2, #element2 { 
    color: red; 
} 

아마도 그것은 당신이 원하는,하지만 난 그렇지 않은 상상할 수있다.

이 경우 @extend only 선택기를 작성해야합니다. 그것은 @include, 과 매우 유사하게 작동합니다. 단, 질문에 간략한 출력을 생성합니다.

%red { 
    color: red; 
} 

#element1{ 
    display: block; 

    .sub-element1 { 
     background: yellow; 

     .sub-element2 { 
     @extend %red; 
     } 
    } 
} 

#element2 { 
    @extend %red; 
} 

Here's a link to it in the official docs : 당신은 그것을 여러 가지를 할 수있는이 그 중 하나입니다.