Sass @extend と継承
Sass @extend ディレクティブ
の@extendディレクティブを使用すると、CSS プロパティのセットをあるセレクターから別のセレクターに共有できます。
の@extendディレクティブは、いくつかの細部が異なるだけで、ほぼ同じスタイルの要素がある場合に便利です。
次の Sass の例では、最初にボタンの基本スタイルを作成します (このスタイルはほとんどのボタンに使用されます)。次に、「レポート」ボタンのスタイルと「送信」ボタンのスタイルを 1 つ作成します。 「レポート」ボタンと「送信」ボタンは両方とも、.button-basic クラスからすべての CSS プロパティを継承します。@extend指令。さらに、独自の色が定義されています。
SCSS 構文:
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
コンパイル後の CSS は次のようになります。
CSS 出力:
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
を使用することで、@extendディレクティブを使用する場合、<button class="button-basic button-report">これを報告</button> のように、HTML コード内の要素に対して複数のクラスを指定する必要はありません。 .button-report を指定するだけで両方のスタイル セットを取得できます。
の@extendディレクティブは、Sass コードを非常に DRY に保つのに役立ちます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。