@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;
}

この例では、.btn--primaryクラスが.btnクラスのスタイルを@extendで引き継ぎつつ、background-colorだけを変更しています。

/* コンパイル後のCSS */
.btn, .btn--primary {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

.btn--primary {
  background-color: #2ecc71;
}

@extendを使った場合、コンパイル後に出力されるCSSでは、.btnクラスと.btn--primaryクラスがグルーピングされ、重複したスタイルが統合されます。

プレースホルダーセレクタを使用する方法

プレースホルダーセレクタとは？

プレースホルダーセレクタは、%記号を使って定義され、実際にはCSSとして出力されません。
これを使うことで、他のセレクタにスタイルを「引き継がせる」ことができます。

// プレースホルダーセレクタの定義
%btn {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

// .btnクラスで%btnを引き継ぐ
.btn {
  @extend %btn;
}

// .btn--primaryクラスでも%btnを引き継ぐ
.btn--primary {
  @extend %btn;
  background-color: #2ecc71; // 背景色だけ変更
}

%btnは実際にはCSSとして出力されない「スタイルのテンプレート」として機能します。
@extend %btnを使うと、.btnや.btn--primaryなどのクラスに共通のスタイルが適用され、例えば.btn--primaryでは背景色だけを変更することができます。

この方法で、基本のスタイルを再利用しつつ、個別の調整ができるようになります。

@extendと@mixinの使用シーンの違い

@extendの使用シーン

@extendは、共通のスタイルを複数のクラスで共有したい場合に使います。
特に、同じスタイルを複数のセレクタで共有したいときに効果的です。

// 基本のボタンスタイル
.btn {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

// .btn--primary は .btn のスタイルを引き継ぎ
.btn--primary {
  @extend .btn;
  background-color: #2ecc71; // 背景色を変更
}

// .btn--danger は .btn のスタイルを引き継ぎ
.btn--danger {
  @extend .btn;
  background-color: #e74c3c; // 背景色を変更
}

@mixinの使用シーン

@mixinは、繰り返し使いたいスタイルをまとめておく場合に使います。
特に、動的に変わるスタイルや、特定のセレクタに対して繰り返し適用したいスタイルを定義する際に有効です。

// 擬似要素のミックスイン
@mixin pseudo-element($position: absolute, $inset: 50% 0 0 50%, $transform: translate(-50%, -50%)) {
  content: "";
  display: block;
  position: $position;
  inset: $inset;
  transform: $transform;
}

// デフォルトの中央配置
.element::before {
  @include pseudo-element;
}

// 他の配置（例: 通常の左上に配置）
.other-element {
  @include pseudo-element(relative, 0 0 0 0, translate(0, 0));
}

@extendと@mixinは、それぞれの使用シーンに適した場面で使うことで、効率的なスタイル管理が可能になります。共通のスタイルを共有したい場合は@extendを、動的に変更可能なスタイルを再利用したい場合は@mixinを活用するなど、シーンに応じた使い分けを心がけましょう。

以上が、「@extend」についての説明でした。

次のステップで、「演算」について説明していきます。

関連リンク

• Sass: @extend