믹스에서 셀렉터 병합

Question

나는 어떤 스타일의 프로젝트라도 필요할 때 적용 할 수있는 별도의 믹스 인 파일에 일반 스타일/트릭을 포함하려고합니다. 이러한 스타일 중 일부는 작동시키기 위해 여러 요소가 함께 작동해야합니다. 예를 들어

:

_mixins.scss 
==================== 
@mixin footer_flush_bottom { 
    html { 
     height: 100%; 
    } 

    body { 
     min-height: 100%; 
     position: relative; 
    } 

    #footer { 
     position: absolute; 
     bottom: 0; 
    } 
} 

main.scss 
==================== 
@import "mixins"; 

@include footer_flush_bottom; 

html { 
    background-color: $bg; 
    //More stuff 
} 

body { 
    margin: 0 auto; 
    //More stuff 
} 

footer.scss 
==================== 
#footer { 
    height: 40px; 
} 

그대로, 믹스 인 작동하지만 생성 된 CSS를 메인 코드에서 믹스 인을 분리, 자신의 선택기가 동일한 경우에도. 이것에 대한 단점은 내가 더 많이 포함하기 시작하면 못생긴 CSS와 큰 파일 크기입니다.

/* line 14, ../../sass/modules/_mixins.scss */ 
html { 
    height: 100%; } 

/* line 18, ../../sass/modules/_mixins.scss */ 
body { 
    min-height: 100%; 
    position: relative; } 

/* line 22, ../sass/modules/_mixins.scss */ 
#footer { 
    position: absolute; 
    bottom: 0; } 

/* line 19, ../../sass/modules/main.scss */ 
html { 
    overflow-y: scroll; } 

/* line 37, ../../sass/modules/main.scss */ 
body { 
    margin: 0 auto; 

/* line 1, ../sass/modules/footer.scss */ 
#footer { 
    height: 40px; 

어쨌든 동일한 선택기를 병합 할 수 있도록이 작업을 수행 할 수 있습니까? 이처럼 :

/* line 19, ../../sass/modules/main.scss */ 
html { 
    height: 100%; 
    overflow-y: scroll; } 

/* line 37, ../../sass/modules/main.scss */ 
body { 
    min-height: 100%; 
    position: relative; 
    margin: 0 auto; 

/* line 1, ../sass/modules/footer.scss */ 
#footer { 
    position: absolute; 
    bottom: 0; 
    height: 40px;} 

Answer 1

번호 말대꾸가 선택기를 병합 방법이 없습니다 (이 셀렉터의 순서를 변경하는 것처럼 이것은 바람직하지 않은 것으로 간주 될 수있다).

당신이 정말 할 수있는 유일한 방법은 (또는 2 개 개의 분리 유지 mixin 쓰기)이 같은 수 있습니다 :

@mixin footer_flush_bottom { 
    height: 100%; 

    body { 
     min-height: 100%; 
     position: relative; 
     @content; 
    } 
} 

html { 
    // additional html styles 
    @include footer_flush_bottom { 
     // additional body styles 
    } 
}