SASS-@extend(継承)指令

SASS–概要SASS–環境構築SASS–Sassプログラムを使用
SASS–構文SASS–変数SASS-ローカルファイル(Partial)SASS–ミキシング(Mixin)SASS－@extend(継承)指令SASS–オペレータSASS–関数SASS–出力形式@extend命令は、あるCSSクラスに別のCSSクラスを継承させることができる.
この方法は、複数の要素間で属性値のセットが共有され、それぞれの追加の属性値がある場合に便利です.

例を挙げて説明する

警告ボックスの例として、警告ボックスには4つのタイプがあります.

info

success

error

warning

すべてのタイプの警告ボックスのスタイルは同じですが、色は異なります.各タイプの警告ボックスは、@extend命令を使用して共通属性のセットを継承し、それぞれ色値を設定します.
例:

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.info {
  @extend .alert;
  background-color: dodgerblue;
}

.success {
  @extend .alert;
  background-color: green;
}

.error {
  @extend .alert;
  background-color: red;
}

.warning {
  @extend .alert;
  background-color: orange;
}

コンパイルすると、次のcssが出力されます.

.alert, .info, .success, .error, .warning {
  padding: 10px;
  background-color: silver;
  color: white; }

.info {
  background-color: dodgerblue; }

.success {
  background-color: green; }

.error {
  background-color: red; }

.warning {
  background-color: orange; }

複数@extend

セレクタで複数の@extendコマンドを使用できます.
例:

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.important {
  font-weight: bold;
  font-size: larger;
}

.important-error {
  @extend .alert;
  @extend .important;
  background-color: red;
}

コンパイルすると、次のcssが出力されます.

.alert, .important-error {
  padding: 10px;
  background-color: silver;
  color: white; }

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

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

チェーン@extend

セレクタはチェーン継承できます.
例:

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.important {
  @extend .alert;
  font-weight: bold;
  font-size: larger;
}

.important-error {
  @extend .important;
  background-color: red;
}

コンパイルすると、次のcssが出力されます.

.alert, .important, .important-error {
  padding: 10px;
  background-color: silver;
  color: white; }

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

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

プレースホルダセレクタ

継承されたcss親クラスは実際に適用されていないことがわかります.つまりhtmlコードには使用されていません.その唯一の目的は、他のセレクタを拡張することです.
このクラスでは、最終的なcssファイルにコンパイル出力されたくない場合があります.CSSファイルのサイズを増やすだけで、いつまでも使用されません.
これがプレースホルダセレクタの役割です.
プレースホルダセレクタはクラスセレクタと似ていますが、ピリオド(.)ではありません.で始まるのではなく、パーセンテージ(%)で始まる.
Sassファイルでプレースホルダセレクタを使用する場合、他のセレクタを拡張するために使用できますが、最終的なCSSにコンパイルされません.
プレースホルダセレクタの使用例:

%alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.info {
  @extend %alert;
  background-color: dodgerblue;
}

.success {
  @extend %alert;
  background-color: green;
}

.error {
  @extend %alert;
  background-color: red;
}

.warning {
  @extend %alert;
  background-color: orange;
}

コンパイルすると、次のcssが出力されます.

.info, .success, .error, .warning {
  padding: 10px;
  background-color: silver;
  color: white; }

.info {
  background-color: dodgerblue; }

.success {
  background-color: green; }

.error {
  background-color: red; }

.warning {
  background-color: orange; }

なお、コンパイル後のCSSには%alertセレクタは含まれていません.