변형/테마 클래스를위한 SASS의 버블 업 규칙

Question

Sass에서 "variation classes"를 어떻게 처리합니까? 예 :

.bookshelf { 
    color: brown; 
    height: 100px; 

    .panel { 
     trimmed: no; 
     height: 10px; 
    } 

    .door { 
     height: 100px; 

     .knob { 
      shape: circle; 
      height: 10px; 
     } 
    } 
} 

변형을 .bookshelf.small으로 만들고 싶습니다. 믹스 인 (Mixin) 또는 데이터를 "버블 업 (bubble up)"하는 것을 사용하여 메인 엘리먼트 안에 변이 코드를 작성하는 방법이 있습니까?

.bookshelf { 
    color: brown; 
    height: 100px; 
    @include small-version { 
     height: 50px; 
    } 

    .panel { 
     trimmed: no; 
     height: 10px; 
     @include small-version { 
      height: 5px; 
     } 
    } 

    .door { 
     height: 100px; 
     @include small-version { 
      height: 50px; 
     } 

     .knob { 
      shape: circle; 
      height: 10px; 
      @include small-version { 
       height: 5px; 
      } 
     } 
    } 
} 

그리고 믹스 인의 출력이

.bookshelf.small { 
    height: 50px; 

    .panel { 
     height: 5px; 
    } 

    .door { 
     height: 50px; 

     .knob { 
      height: 5px; 
     } 
} 

여러 가지가 될 것이다는 등 @에서 루트 기능과 @content 기능으로, 유망 보였지만, 어느 쪽이 시나리오 일 것입니다. @media 설정을 쓰면 거품이 생길 것입니다. 그러나 나는 이것을 미디어 쿼리에 묶기를 원하지 않는다. 특정 클래스에 묶어두기를 바란다. (.bookshelf도 클래스가 작고,이 규칙을 적용한다.)

Answer 1

작은 해킹이 있습니다. 하지만 정말로 신중하게 작업해야합니다. 그리고 당신이 묻는 것만 큼 좋지는 않습니다.

우선 은 선택기에 테마 클래스 인을 추가하므로 요소 선택기를 사용할 수 없습니다. 실제로 많은 셀렉터 도우미가 docs에 있지만 실제로 셀렉터 문자열을 파싱하는 데 도움이되는 항목을 찾지 못했습니다.

두 번째로 선택기를 그룹화하지 않습니다. mixin이 포함 된 곳에서 규칙을 삽입합니다. 하지만 스타일에 우선 순위가 높은 규칙을 생성하므로 반쯤 될 수 있습니다.

postcss parser 또는 다른 파일의 스타일을 분리하는 데 도움이되는 다른 파일 처리 도구를 파헤 칠 수 있습니다.

@mixin small-version { 
    @at-root .small#{&} { 
    @content; 
    } 
} 

.bookshelf { 
    color: brown; 
    height: 100px; 
    @include small-version { 
    height: 60px; 
    } 

    .panel { 
    trimmed: no; 
    height: 10px; 

    @include small-version { 
     height: 5px; 
    } 
    } 

    .door { 
    height: 100px; 

    .knob { 
     shape: circle; 
     height: 10px; 
    } 
    } 
} 

Gist link