Extend ve Yer Tutucu Seçiciler

@extend, bir seçicinin başka bir seçicinin tüm stillerini devralmasını sağlar. Kodun yinelenmesi yerine genişletme, derlenmiş CSS'te ortak bir kural kümesi oluşturur.

Yer tutucu seçici (% ile başlayan), tek başına hiçbir zaman derlenmeyen bir stil bloğu tanımlar; yalnızca genişletildiğinde derlenir. Bir şey onu genişletmedikçe CSS üretmez.

Gerçek bir sınıfı genişletmek, o sınıfın tüm seçici bağlamını derlenmiş çıktıya ekler. Yer tutucular daha temizdir; yalnızca genişleten seçiciler için gruplanmış seçiciler üretir.

Birden çok seçici aynı yer tutucuyu genişlettiğinde Sass bunları virgülle ayrılmış tek bir kuralda gruplar:

@extend önemli sakıncalara sahiptir:

• Medya sorgularının içinde kullanılamaz
• Genişletme zincirleri oluştuğunda beklenmeyen, büyük gruplanmış seçiciler üretebilir
• Derlenmiş CSS'in kaynak dosyalara kadar izlenmesini zorlaştırır

Karşılaştırma:

• @extend: daha küçük CSS (ortak kurallar), ancak karmaşık seçici zincirleri ve medya sorgusu sınırlamaları
• @mixin: bildirimleri yineler, ancak daha öngörülebilirdir ve medya sorgularının içinde kullanılabilir

Modern Sass yaklaşımında karışımlar genellikle @extend yerine tercih edilir. HTTP/2 ve gzip sıkıştırması, bildirimleri yinelemeyi daha az önemli hâle getirirken karışımların hata ayıklanabilirliği, CSS boyutundaki küçük farktan daha ağır basar.

@extend (yer tutucularla) şu durumlarda uygundur:

• Birden çok seçici gerçekten aynı anlamsal durumu paylaşıyorsa (örneğin hata durumları)
• Bir medya sorgusunun içinde değilseniz
• Temel stiller kararlı ve iyi tanımlanmışsa

Yer tutucular, birden çok bileşenin devraldığı sıfırlama benzeri yardımcı araç kümeleri için iyi çalışır:

Bazı stil kılavuzları ve ekipler, karmaşıklığı ve neden olabileceği seçici şişkinliği yüzünden @extend kullanımını tamamen yasaklar. Ödünleri öğreniniz ve ekibinizin kurallarına uyunuz.

@extend, bir seçicinin başka bir seçicinin stillerini devralmasını ve seçicilerin derlenmiş CSS'te gruplanmasını sağlar. Yer tutucular (%name), genişletilene kadar hiçbir şeye derlenmez; bu, gerçek sınıfları genişletmekten daha temizdir. Medya sorgularının içinde @extend kullanmaktan kaçınınız. Modern Sass'ta öngörülebilirlikleri ve hata ayıklanabilirlikleri nedeniyle karışımlar genellikle @extend yerine tercih edilir.