SCSSでextendを使用する場合の書き方

CSS SCSS

SCSSでextendを使用する場合の書き方

SCSSで@extendを使用すると、あるセレクタに定義されたスタイルを他のセレクタに適用することができます。
これにより、コードの重複を減らし、スタイルシートのメンテナンス性を向上させることができます。

基本的な使い方

例えば、以下のように%placeholderを定義して、それを他のセレクタに@extendする方法があります。

// ベースのスタイルを定義
%test-base-button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background-color: #007BFF;
  color: #fff;
}

// セレクタで@extendを使用
.test-primary-button {
  @extend %test-base-button;
  background-color: #28A745;
}

.test-secondary-button {
  @extend %test-base-button;
  background-color: #6C757D;
}

解説

1. %placeholderセレクタ
%test-base-buttonはプレースホルダセレクタとして定義されています。
このセレクタ自体はコンパイル後のCSSには出力されませんが、@extendを使用する他のセレクタにスタイルを共有することができます。

2. @extendの使用
.test-primary-buttonと.test-secondary-buttonは、それぞれ@extend %test-base-buttonを使用して、共通のスタイルを継承しています。
この場合、padding、border-radius、border、cursor、colorなどのプロパティが共通で適用されますが、それぞれのセレクタで異なるbackground-colorを指定することで、カスタマイズされたボタンが作成されています。

注意点

  • パフォーマンスへの影響

@extendを使うと、セレクタが結合されて出力されるため、CSSのセレクタの複雑さが増すことがあります。
特に大規模なプロジェクトでは、適切な管理が必要です。

  • @extendはCSSセレクタに依存する

@extendはセレクタに依存して動作するため、予期しないスタイルの継承が発生する可能性があります。
セレクタが同じプロパティを共有する場合、慎重に使用することが求められます。

実際の出力

上記のSCSSコードがコンパイルされると、以下のようなCSSが生成されます。

.test-primary-button, .test-secondary-button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  color: #fff;
}

.test-primary-button {
  background-color: #28A745;
}

.test-secondary-button {
  background-color: #6C757D;
}

このように、@extendを使うことで、共通のスタイルを一度に定義し、それを複数のセレクタで再利用することができます。
スタイルの一貫性を保ちながら、コードの重複を避けることができるため、効率的なスタイル管理が可能です。