は私がルールを持っている@extendなしまたは

Question

@mixin別の内の1つのCSSルールを含める：

.foo { ...} 

その後、私は別のルールでこれを含める：

.bar { <want contents of .foo here> } 

私がこれを行うことができます@extend、しかしこれはいくつか考えてみてくださいa bad practice。私は@includeでそれを行うことができますが、今私は、もはやそのことを意味、私は次の定型書きがない限り、私のスタイルシート内のルールとして表示ミックスイン、に.fooという有効にする必要があります：

@mixin foo { ... } 
.foo { @include foo(); } 

を私は数百を持っていますこれは潜在的に適用されるクラスのものであり、私はそのすべての定型文を望んでいません。ただ一つのルールを別のルールに組み込むことが自由で、最初にそれをミックスインにすることも、@extendのセマンティクス（つまり共有セレクタ）を扱うこともできません。

SASSでも可能ですか？

Answer 1

これは存在します。 placeholder selectorをここで使用してください。

のように後で.fooに拡張すると、他の2つのクラスセレクタも拡張されるので、悪いです。

あなたの代わりに

.foo, 
%foo { font-family: 'foo' } 

として最初のルールを記述する場合、あなたが.fooが安心して、あなたがやりたいことができます。そのルールでスタイルを使用するものが必要な場合は、代わりに@extend %foo。プレースホルダーセレクターはCSSにコンパイルされず、単純なルールだけを拡張する別のセレクターには書き込まない場合もあります。我々は

.foo.baz { font-size: $baz } 
.bar { @extend %foo } 

を追加する場合

あなたはうまく

.foo, .bar { font-family: 'foo' } 
.foo.baz { font-size: $baz } 

にコンパイルだから、いくつかのより多くの文字を書いているのでしょうが、それはミックスインのような全く新しい「ルール」ではありません、あなたあなたの心のコンテンツにルールを安全に拡張することができます。

エクステンションはまだ手に入らない可能性があるので、注意深く注意深く使用してください。私はa blog post on this earlier this yearも書いています。

---

側のコメント：これは本当に他のクラスの数百にも適用することであろう場合 、ユーティリティクラスとして.fooシンプルを維持していた方が良いかもしれません。次に、拡張することを考えていたマークアップに.fooを追加します。それが詳細なしであなたのケースでより良いと言うことは難しいですが、考慮する価値があります。特にルールがシンプルだが再利用可能なテキストをセンタリングするような場合