SCSSに別のクラスを含める

309

私のSCSSファイルにこれがあります：

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

class-bでは、のすべてのプロパティとネストされた宣言を継承したいと思いclass-aます。これはどのように行われますか？を使用してみまし@include class-aたが、コンパイル時にエラーが発生しました。

inheritance sass

— F21
ソース

624

ルックスが好き@mixinと@include、このような単純な場合には必要ありません。

1つだけ行うことができます。

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

— F21
ソース

40

@extendは正常に機能しますが、いずれかのクラスがディレクティブ（通常はメディアクエリ）内にある場合は機能しません。両方が同じディレクティブ内にある場合を除きます。

— MartinAnsty 2013年

13

いくつかの楽しみの事実についてはこちらをご覧ください@extend：あなたが知っておくべきいくつかのトリッキーな副作用があります- stackoverflow.com/questions/30744625/...

— トニリー

2

@ToniLeighに感謝します。親セレクターが拡張のみに使用される場合（どこでも使用されない場合）、追加のCSSセレクターの生成を節約できるので、PlaceHolderは興味深いものです。上記の例のように、.myclass以外の場所では（おそらく私は）使用されていないので、として定義し、として拡張した.myotherclass方がよいでしょう。それは次のように生成されます.myclass%myclass.myotherclass@extend %myclass;.myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

— Abhijeet

5

プレースホルダの使用例 Vsが正常クラスセレクタを使用する例

— Abhijeet

@MartinAnstyまあ、それは嫌だ。

— Abram

51

これを試して：

共通のプロパティを持つプレースホルダー基本クラス（％base-class）を作成します
このプレースホルダーを使用してクラス（.my-base-class）を拡張します。

これで、任意のクラス（例：.my-class）で％base-classを拡張できます。

%base-class {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
}

.my-base-class {
    @extend %base-class;
}

.my-class {
    @extend %base-class;
    margin-bottom: 40px;
}

— アシュウィン
ソース

この答えは最も人気のある答えと同じだと思います。私は正しいですか？

— Yevgeniy Afanasyev 2018年

1

@Yevgeniy Afanasyevいいえ、クラスを直接拡張するのではなく、プレースホルダーを直接拡張できます。

— アシュウィン2018年

それは決して尋ねられなかった:(

— Yevgeniy Afanasyev

1

@Yevgeniy Afanasyevがクラスを直接拡張する（最も一般的な回答）のはうまくいきませんでしたが、プレースホルダーを拡張することでうまくいきました。同じ答えではないので、投稿しました。

— 2018年

3

別の回答を投稿していただきありがとうございますが、なぜそれが必要なのかは回答から明らかではありません。このアプローチのユースケースまたは利点を明確にするために、さらに推論を追加していただければ幸いです。ありがとうございました。

— Yevgeniy Afanasyev 2018年

16

@extendの使用は良い解決策ですが、コンパイルされたcssがクラス定義を分割することに注意してください。同じプレースホルダーを拡張するクラスは一緒にグループ化され、クラスで拡張されないルールは別の定義になります。複数のクラスが拡張された場合、コンパイルされたcssまたは開発ツールでセレクターを検索するのは手に負えなくなる可能性があります。一方、ミックスインはミックスインコードを複製し、追加のスタイルを追加します。

あなたはこのsassmeisterで@extendと@mixinの違いを見ることができます

— アリ
ソース

sassmeisterリンクが壊れています。

— LexieHankins

11

@extend .myclass;
@extend #{'.my-class'};

— マクマクスウェル
ソース

22

このコードは質問に答えることがありますが、このコードが質問に答える理由や方法に関する追加のコンテキストを提供すると、長期的な価値が向上します。

— adiga

2

@extend #{'.my-class', '.my-other-class'};

— iarroyo 2018年

2

ここでハッシュバングの意味は何ですか？

— Konrad Viltersten

7

別のオプションは、属性セレクターを使用することです：

[class^="your-class-name"]{
  //your style here
}

「your-class-name」で始まるすべてのクラスはこのスタイルを使用します。

だからあなたの場合、あなたはそうすることができます：

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

w3Schoolsの属性セレクターの詳細

— 漢字
ソース