本記事では、SCSSの@extendの使い方と使いどころについて解説しています。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
@extendの使い方
@extendはセレクタのスタイルを継承したい時に使います。使い方は以下のとおりです。
.example {
@extend 継承元セレクタ;
}@extendを使ったサンプルコードを用意したよ。
.text1 {
color: red;
}
.text2 {
@extend .text1;
}コンパイルしたCSSは以下のとおりです。
.text1, .text2 {
color: red;
}.text1のスタイルが.text2に継承されていることが分かります。
先輩くん実務で@extendを使う例を1つ紹介するね。
.parent1 {
&__text {
color: red;
}
&__button {
max-width: 300px;
margin: 0 auto;
padding: 10px;
background-color: aquamarine;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
&:hover {
background-color: transparent;
}
}
}
.parent2 {
&__text {
color: blue;
}
&__button {
@extend .parent1__button;
}
}上記のコードのように親要素が異なり、それぞれ別のセレクタを保持している時によく@extendを使います。コンパイルしたcssを確認すると、
.parent1__text {
color: red;
}
.parent1__button, .parent2__button {
max-width: 300px;
margin: 0 auto;
padding: 10px;
background-color: aquamarine;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3;
}
.parent1__button:hover, .parent2__button:hover {
background-color: transparent;
}
.parent2__text {
color: blue;
}.parent2__buttonのみが継承されていることが分かります。また、継承元のセレクタに疑似要素が含まれている場合は、継承先のセレクタにも付与されます。
プレースホルダーセレクタ
@extendでセレクタのスタイルを継承した場合、継承元のセレクタも出力されてしまいます。継承元のセレクタは出力せず、継承先のセレクタのみ出力させたい場合はプレースホルダーセレクタを使います。使い方は以下のとおりです。
%example{
// 継承させたいスタイルを記述
}最初に紹介したサンプルコードをプレースホルダーセレクタに置き換えてみよう。
%text1 {
color: red;
}
.text2 {
@extend %text1;
}コンパイルしたCSSは以下のとおりです。
.text2 {
color: red;
}.text2のみが出力されています。
