会員限定 @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;
}