Sassの強力な機能の一つである@extendについて詳しく解説します。この機能を使いこなすことで、CSSを効率的に管理し、再利用性を高めることができます。
@extendの基本的な使い方
まず、@extendの基本的な使い方から紹介します。
%message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.info {
@extend %message;
background-color: #eef;
}
.success {
@extend %message;
background-color: #e6ffe6;
}
.error {
@extend %message;
background-color: #ffe6e6;
}生成されるCSSは以下のようになります。
.info, .success, .error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.info {
background-color: #eef;
}
.success {
background-color: #e6ffe6;
}
.error {
background-color: #ffe6e6;
}上記のコードでは、共通のスタイルを%messageというプレースホルダーセレクタに定義し、各クラス（.info, .success, .error）でそのスタイルを継承しています。
@extendのメリット
@extendを使用する主なメリットは以下の通りです。
- コードの再利用：重複するスタイルを避けることで、コードをシンプルに保つことができます。
- メンテナンスの容易さ：一箇所を変更するだけで、関連するすべてのスタイルに反映されます。
- ファイルサイズの削減：共通のスタイルが一つにまとめられるため、CSSファイルのサイズが小さくなります。
@extendを使う際の注意点
@extendを使う際には、以下の点に注意してください。
- セレクタの結合：意図しないスタイルの影響を避けるため、慎重に使用する必要があります。
- CSSの特異性：特異性の問題が発生することがあるため、スタイルが正しく適用されない場合があります。
- プレースホルダーセレクタの利用：%で始まるプレースホルダーセレクタを使用することで、生成されるCSSに不要なセレクタが含まれないようにすることが推奨されます。
より複雑な例
次に、もう少し複雑な例を見てみましょう。
%button {
display: inline-block;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
}
.btn-primary {
@extend %button;
background-color: #007bff;
color: #fff;
}
.btn-secondary {
@extend %button;
background-color: #6c757d;
color: #fff;
}生成されるCSSは次のようになります。
.btn-primary, .btn-secondary {
display: inline-block;
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
}
.btn-primary {
background-color: #007bff;
color: #fff;
}
.btn-secondary {
background-color: #6c757d;
color: #fff;
}このコードでは、共通のボタンスタイルを%buttonに定義し、各ボタンタイプ（.btn-primary, .btn-secondary）で継承しています。これにより、スタイルを一箇所にまとめつつ、異なる背景色や色を適用することができます。
まとめ
Sassの@extendは、CSSのスタイルを効率的に再利用し、メンテナンスを容易にするための強力なツールです。正しく使うことで、CSSファイルの整理が進み、コードの読みやすさも向上します。
