Design
Coding
Setting
Sassとは
04:26会員限定 @extend
- @extendとは？
- @extendと@mixinの使用シーンの違い
- 関連リンク
@extendとは？
@extendは、スタイルの重複を避けコードを効率的に再利用できるようにするために使用されます。
簡単に言うと、あるスタイルを別のスタイルに「引き継がせる」ことができる機能です。
基本的な使い方
@extendは、指定したクラスのスタイルを他のクラスに「引き継がせる」ため、同じスタイルを複数回書く必要がなくなります。
これにより、コードが簡潔に保たれ、スタイルの重複が減ります。
使用例
/ 基本のボタンスタイル
.btn {
padding: 10px 20px;
background-color: #3498db;
color: white;
border-radius: 5px;
}
// .btnクラスを引き継ぐ別のボタン
.btn--primary {
@extend .btn;
background-color: #2ecc71;
}Sassコーディング
全 9 動画
