Sass @extend ve Miras

Sass @extend düzenleyici

@extend düzenleyici, bir seçiciyi diğer bir seçiciye bir grup CSS özelliği paylaşmanıza olanak tanır.

Eğer neredeyse aynı stili olan ancak bazı küçük ayrıntılarda farklı olan öğeleriniz varsa: @extend düzenleyici çok kullanışlıdır.

Aşağıdaki Sass örneği öncelikle düğmeye temel bir stil oluşturur (bu stil çoğu düğme için kullanılacaktır). Ardından, "Rapor" düğmesi için bir stil oluşturur, "Gönder" düğmesi için bir stil oluşturur. "Rapor" ve "Gönder" düğmeleri @extend Düzenleyici, .button-basic sınıfının tüm CSS özelliklerini devralır. Ayrıca, kendi renklerini tanımlar:

SCSS dilbilgisi:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: kırmızı;
}
.button-submit  {
  @extend .button-basic;
  background-color: yeşil;
  color: beyaz;
}

Derlendikten sonra, CSS şu şekilde görünecektir:

CSS Çıktısı:

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  background-color: kırmızı;
}
.button-submit  {
  background-color: yeşil;
  color: beyaz;
}

Kullanarak @extend Talimatı, HTML kodundaki elementlere birden fazla sınıf belirlemek zorunda kalmadan, örneğin: <button class="button-basic button-report">Bu haberi bildir</button>. Sadece .button-report belirtmeniz yeterlidir ve iki grup stil elde edersiniz.

@extend Talimatlar, Sass kodunuzu çok kurak (DRY) tutmanıza yardımcı olur.