SCSS Extend & Inheritance - DRY mit @extend

@extend ermöglicht Style-Inheritance zwischen Selektoren.

@extend Basics

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
}

.button-primary {
  @extend .button;
  background: blue;
  color: white;
}

// Kompiliert zu:
// .button, .button-primary {
//   padding: 10px 20px;
//   border: none;
//   border-radius: 4px;
// }
// .button-primary {
//   background: blue;
//   color: white;
// }

Placeholder Selectors

Placeholders mit % werden nicht kompiliert:

%button-base {
  padding: 10px 20px;
  border: none;
}

.btn-primary {
  @extend %button-base;
  background: blue;
}

.btn-secondary {
  @extend %button-base;
  background: gray;
}

// Kompiliert zu:
// .btn-primary, .btn-secondary {
//   padding: 10px 20px;
//   border: none;
// }

@extend vs @mixin

@extend (Shared Styles)

%card {
  padding: 20px;
  border: 1px solid gray;
}

.user-card {
  @extend %card;
}

.product-card {
  @extend %card;
}

// Output: Selektoren werden kombiniert
// .user-card, .product-card { padding: 20px; ... }

@mixin (Duplicated Styles)

@mixin card {
  padding: 20px;
  border: 1px solid gray;
}

.user-card {
  @include card;
}

.product-card {
  @include card;
}

// Output: Styles werden dupliziert
// .user-card { padding: 20px; ... }
// .product-card { padding: 20px; ... }

Wann was?

@extend:

• ✅ Statische gemeinsame Styles
• ✅ Keine Parameter nötig
• ✅ Kleinere CSS-Datei

@mixin:

• ✅ Mit Parametern
• ✅ Dynamische Styles
• ✅ Mit @content Blocks
• ✅ Besser für Theme-Wechsel

Viel Erfolg! 🚀