バリエーション/テーマクラス用のSASSのバブルアップルール

Question

Sassで "バリエーションクラス"を作成する方法は？例：

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

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

    .door { 
     height: 100px; 

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

.bookshelf.smallをバリエーションにしたいとします。ミックスインやデータを「バブルアップ」するものを使って、主な要素の中にバリエーションコードを書く方法はありますか？

.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にセレクタヘルパーがたくさんありますが、実際の解析セレクタ文字列で助けになるものは見つかりませんでした。

第2に、セレクタをグループ化していません。 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