sass
拡張/継承

構文

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

パラメーター

備考

クラスを拡張する

.message
  color: white

.message-important
  @extend .message
  background-color: red

これは、 .messageすべてのスタイルを.message 、それを.message-important追加します。次のCSSを生成します：

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

複数のクラスから拡張する

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

上記のコードでは、 @extendは複数のクラスのコードを.message-importantに追加するために1行で使用されていますが、次のように1行に1つの拡張を使用することは可能です：

.message-important
    @extend .message
    @extend .important

これらのメソッドのいずれかが次のCSSを生成します：

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

チェーンの延長

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

このコードは、原因.message-errorから延びるように.message-importantことは、両方のコードを含むであろうことを意味し、 .message-importantと.messageので、 .method-importantから延び.message 。これにより、次のCSSが生成されます。

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

免責事項：あなたが拡張しているクラスがコード内で一度だけ出現することを確認してください。さもなければ、Sassは乱雑で複雑なCSSを生成するかもしれません。

オプションの拡張

場合によっては、 @extendをオプションにして、指定されたクラスがコード内に存在する必要はありません。

.message-important
  @extend .message !optional
  background: red

これにより、次のCSSが生成されます。

.message-important {
  background: red;
}

免責事項：これは開発中に役立ちます。あなたのコードのすべてがまだ書かれておらず、エラーが欲しくない場合は、予期しない結果につながる可能性があるため、

プレースホルダ

場合によっては、独自の権限ではなく、他のルールセット内で拡張するクラスを作成することもあります。これは、コンパイルされたCSSファイルが必要以上に大きくなることを意味します。プレースホルダーセレクターはこの問題を解決します。

プレースホルダセレクタはクラスセレクタに似ていますが、クラスに使用される（。）の代わりにパーセント記号（％）を使用します。コンパイルされたCSSには表示されません。

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

これは次のCSSにコンパイルされます：

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

親を拡張する

通常、親を次のように拡張しようとしています。

.parent {
  style: value;

  @extend &;
}

親が拡張できないことを示すエラーが発生します。これは理にかなっていますが、回避策があります。親セレクタを変数に格納するだけです。

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

上の例でこれを行うとメリットはありませんが、これは含まれているmixinから親スタイルをラップする力を与えます。