SCSS Inheritance (Miras Alma)

SCSS’de inheritance yani miras alma yöntemi ile kod tekrarının önüne geçebiliyoruz. Kullanımı oldukça kolay. SCSS’de miras almayı bir örnek üzerinde göstermek istiyorum.

4 farklı buton tasarımı yapacağım. Bu butonların tüm özellikleri aynı sadece arkaplan renkleri farklı olacak.

İşte bu gibi durumlarda miras alma özelliğini kullanmak kod tekrarı yapmamızı önleyecektir.

4 butonun da aşağıdaki özellikleri tamamen aynı olacak.

  • width: 100px;
  • height: 100px;
  • border: none;
  • border-radius: 8px;
  • color: white;
  • font-size: 20px;

Diğer taraftan 4 butonun da background-color özelliğine farklı renkler vereceğim.

Artık kodlarımızı yazmaya başlayabiliriz.

Scss Kodları

Burada ortak-ozellikler adında bir class oluşturdum ve ortak olan tüm özellikleri içerisinde tanımladım.

Asıl önemli olan kısım bu class’ı SCSS’de diğer yerlerde nasıl kullanacağımız.

 ⇒  Bunun için kullanmak istediğimiz yerlerde öncelikle “@” işaretini yazıyoruz.

 ⇒  Sonrasında boşluk bırakmadan extend anahtar kelimesini yazıyoruz.

 ⇒  Son olarakta yukarıda tanımlamış olduğumuz .ortak-ozellikler class’ını yazıp “;” ile bitiriyoruz.

Yani,

kodunu yazdığımız her yere aslında,

kodlarını yazmış sayılıyoruz.

Scss Kodlarının Css’e Dönüştürülmüş Hali ise şu şekilde:

Butonların Görünümü

scss-extend-kullanimi

Gördüğünüz gibi miras aldığımız bütün özellikler tüm butonlara uygulanmış.

Css kodlarına dikkat ederseniz şu şekilde bir kod bloğu bulunuyor.

Yani tanımladığımız ortak-ozellikler class’ı da dönüştürülmüş.

Eğer miras aldığımız class isminin Css dosyasında görünmesini istemiyorsanız Scss dosyasında bu class’ın önünde nokta (.) yerine yüzde(%) işareti kullanmalısınız.

Aynı şekilde @extend ifadesinden sonra kullandığımız yerlerde de nokta (.) yerine yüzde(%) işareti kullanmalısınız.

Kodlarımızı bir de bu şekilde yazıp Css çıktısına bakalım.

Scss Kodları

Scss Kodlarının Css’e Dönüştürülmüş Hali

Gördüğünüz gibi bu sefer ortak-ozellikler class’ı Css dosyasında bulunmuyor.

Scss’de Inheritance yani miras alma bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın