SASS ve SCSS'te Extend Kullanımı

Merhabalar. Bu yazımda SASS ve SCSS'te extend kullanımından bahsedeceğim. Extend, kalıtım yani miras alma işlemleri için kullanılır. Extend ile oluşturulmuş bir yapıyı miras alan tüm elemanlar için seçiciler bir araya toplanır ve stil özellikleri tek bir blok üzerinden verilir. Aşağıdaki örnekten çok daha net anlaşılacaktır.

Websitelerinde kullanılan mesaj ve uyarı kutularıyla mutlaka bugüne kadar karşılaşmışsınızdır. Aşağıda CSS ile oluşturulmuş hatalı, başarılı ve uyarı durumlarını içeren üç farklı mesaj kutusu tasarımı bulunmaktadır.

.hatali {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
  background: red;
}

.basarili {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
  background: green;
}

.uyari {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
  background: red;
}

Dikkat ettiyseniz bu üç farklı mesaj kutusunun arka plan renkleri hariç tüm stil özellikleri birebir aynıdır. İşte bu durumda miras alma yani kalıtım yöntemi kullanılabilir. Miras alma işlemi için SASS ve SCSS'te @extend komutu kullanılır. Peki bu yapıyı nasıl miras alma yöntemiyle oluşturabiliriz, şimdi ona bakalım.

Önce SASS ile başlayalım. Ortak olan tüm özellikler için .mesaj adında bir stil bloğu oluşturuyorum. Üç seçici için de ortak olan özellikleri bu blok içerisine alıyorum.

.mesaj 
    float: left 
    width: 300px
    padding: 15px
    margin: 15px 
    text-align: center 
    color: #fff

Ardından kullandığım üç seçici için .mesaj isim stil bloğunu @extend kullanarak miras alıyorum.

.hatali
    @extend .mesaj
    background: red

.basarili
    @extend .mesaj
    background: green

.uyari
    @extend .mesaj
    background: red

Bu yapıyı oluşturup compile ettiğim zaman aşağıdaki gibi bir CSS dosyası oluşacaktır.

.mesaj, .hatali, .basarili, .uyari {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
}

.hatali {
  background: red;
}

.basarili {
  background: green;
}

.uyari {
  background: red;
}

Dikkat ettiyseniz, .mesaj isimli seçicinin kullanıldığı yani miras alındığı tüm seçiciler bir araya getirildi ve sadece bir stil bloğu içerisinde stil özellikleri verildi. İşte miras alma dediğimiz yöntem tam olarak böyle bir yapıya sahip. Miras alınan seçicinin sahip olduğu özellikler dışında verilen farklı özellikler ise ayrı bir seçici oluşturularak verilmiş oldu.

Şimdi aynı işlemi SCSS'te yapalım. Sadece noktalı virgül ve süslü parantez farkı olacaktır. Önce miras alacağım yapıyı oluşturuyorum.

.mesaj {
    float: left ;
    width: 300px;
    padding: 15px;
    margin: 15px ;
    text-align: center ;
    color: #fff ;
}

Ardından da diğer seçicileri oluşturup, miras alma işlemini gerçekleştiriyorum.

.hatali {
    @extend .mesaj; 
    background: red
}

.basarili {
    @extend .mesaj; 
    background: green
}

.uyari{
    @extend .mesaj; 
    background: red
}

Bu SCSS dosyasını derlediğim zaman SASS'taki gibi aynı CSS çıktısını verecektir.

.mesaj, .hatali, .basarili, .uyari {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
}

.hatali {
  background: red;
}

.basarili {
  background: green;
}

.uyari {
  background: red;
}

İşte SASS ve SCSS içerisinde miras alma işlemi yani @extend komutunun kullanılması bu şekilde. Şimdi dilerseniz @extend ile @mixin arasındaki farka bakalım.

@extend ile @mixin Arasındaki Fark

SASS ve SCSS'te bu işlemi hem mixin hem de extend yapısıyla oluşturmak mümkündür. Ancak ikisi arasında çok ciddi bir fark olacaktır. Dilerseniz bu yapıyı bir de @mixin ile oluşturalım. Bu farkı SCSS üzerinden göstereceğim .

Aynı yapının SCSS'te @mixin kullanılarak oluşturulmuş hali aşağıdaki gibi olacaktır.

@mixin mesaj {
    float: left ;
    width: 300px;
    padding: 15px;
    margin: 15px ;
    text-align: center ;
    color: #fff ;
}

.hatali {
    @include mesaj;
    background: red
}

.basarili {
    @include mesaj;
    background: green
}

.uyari{
    @include mesaj;
    background: red
}

Dikkat ettiyseniz SASS ve SCSS içerisinde mixin ve extend kullanımı arasında pek fark yok gibi görünüyor. Ancak bir de dilerseniz CSS çıktısına bakalım.

.hatali {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
  background: red;
}

.basarili {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
  background: green;
}

.uyari {
  float: left;
  width: 300px;
  padding: 15px;
  margin: 15px;
  text-align: center;
  color: #fff;
  background: red;
}

Gördüğünüz gibi kodlarımızda gereksiz tekrarlar oluşturuldu. İşte mixin ile extend arasındaki farkı bu şekilde özetleyebiliriz. Eğer siz tekrar eden yapılar için @mixin kullanırsanız, @mixin içerisine yazdığınız tüm stil özellikleri sanki kopyala > yapıştır yapılmış gibi bu yapıyı kullandığınız her yere getirilecektir. Ancak @extend kullanırsanız, ortak özellikler tek bir stil bloğu içerisine alınacak ve bu yapıyı kullanan tüm seçiciler bir araya getirilecektir.

Bu örneğe bakıldığı zaman, bu tarz durumlarda @extend kullanımı daha mantıklı gibi görünüyor. Ancak sadece bu örneğe bakıp da "@extend, @mixin'e göre daha avantajlıdır" gibi kesin ve genelgeçer bir cümle kuramayız. Çünkü @mixin kullanmanın da avantajlı olduğu durumlar mutlaka vardır.

Bu içeriğe ait video derse aşağıdan ulaşabilirsiniz.