SASS - @extend（継承）指令 - コードワールド

著作権：著作権、許可なく複製禁止！https://blog.csdn.net/weixin_43031412/article/details/91492729

@extend命令は、CSSのCSSクラスが別のクラスから継承することができます。

複数の要素は、属性値の組の間で共有される場合、また各追加属性値ことは、この方法は有用です。

イラスト

ボックスに警告するために、例えば、警告ボックスには4つのタイプがあります。

インフォ
成功
エラー
警告

すべての警告ボックススタイルの同じタイプが、異なる色。使用した警告ボックスの各タイプの@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ファイルにコンパイルしたくないかもしれません。

これは、プレースホルダ・アクション・セレクタです。

プレースホルダクラスセレクタと同様セレクタが、それらはピリオド（。）開始時ではなく、先頭にパーセント記号（％）。

他のセレクタを拡張するために使用することができるが、プレースホルダサスファイルセレクタは、最終的な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は％警告セレクタが含まれていない、注意してください。