web-dev-qa-db-ja.com

SCSSに他のクラスを含める

SCSSファイルにこれがあります。

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

.class-b{

 //Inherite class-a here

 //some properties
}

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

inheritancesass
240
F21

@mixinと@includeは、このような単純な場合には必要ありません。

ただすることができます：

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

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

これを試して：

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

  3. これで、％base-classをあなたのクラスのどれでも拡張することができます（例.my-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;
}
26
Ashwin

@extendを使用することは良い解決策ですが、コンパイルされたCSSがクラス定義を分割することに注意してください。同じプレースホルダーを拡張するクラスはグループ化され、そのクラスで拡張されていないルールは別の定義になります。いくつかのクラスが拡張されるようになると、コンパイルされたcssまたはdevツールでセレクターを探すのが手に負えないものになる可能性があります。ミックスインはミックスインコードを複製し、追加のスタイルを追加します。

@extendと@mixinの違いは、この sassmeister で確認できます。

12
Ari

もう1つのオプションは、属性セレクタを使用することです。

[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 の属性セレクタについての詳細

4
Khanji
@extend .myclass;
@extend #{'.my-class'};
1
mcmaxwell