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.
Html Kodları
|
1 2 3 4 5 6 |
<button id="btn-1">Button-1</button> <button id="btn-2">Button-2</button> <button id="btn-3">Button-3</button> <button id="btn-4">Button-4</button> |
Scss Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.ortak-ozellikler{ width: 100px; height: 100px; border: none; border-radius: 8px; color: white; font-size: 20px; } #btn-1{ @extend .ortak-ozellikler; background-color: blueviolet; } #btn-2{ @extend .ortak-ozellikler; background-color: red; } #btn-3{ @extend .ortak-ozellikler; background-color: green; } #btn-4{ @extend .ortak-ozellikler; background-color: cornflowerblue; } |
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,
|
1 2 3 |
@extend .ortak-ozellikler; |
kodunu yazdığımız her yere aslında,
|
1 2 3 4 5 6 7 8 |
width: 100px; height: 100px; border: none; border-radius: 8px; color: white; font-size: 20px; |
kodlarını yazmış sayılıyoruz.
Scss Kodlarının Css’e Dönüştürülmüş Hali ise şu şekilde:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.ortak-ozellikler, #btn-1, #btn-2, #btn-3, #btn-4 { width: 100px; height: 100px; border: none; border-radius: 8px; color: white; font-size: 20px; } #btn-1 { background-color: blueviolet; } #btn-2 { background-color: red; } #btn-3 { background-color: green; } #btn-4 { background-color: cornflowerblue; } |
Butonların Görünümü
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.
|
1 2 3 4 5 6 7 8 9 10 |
.ortak-ozellikler, #btn-1, #btn-2, #btn-3, #btn-4 { width: 100px; height: 100px; border: none; border-radius: 8px; color: white; font-size: 20px; } |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
%ortak-ozellikler{ width: 100px; height: 100px; border: none; border-radius: 8px; color: white; font-size: 20px; } #btn-1{ @extend %ortak-ozellikler; background-color: blueviolet; } #btn-2{ @extend %ortak-ozellikler; background-color: red; } #btn-3{ @extend %ortak-ozellikler; background-color: green; } #btn-4{ @extend %ortak-ozellikler; background-color: cornflowerblue; } |
Scss Kodlarının Css’e Dönüştürülmüş Hali
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#btn-1, #btn-2, #btn-3, #btn-4 { width: 100px; height: 100px; border: none; border-radius: 8px; color: white; font-size: 20px; } #btn-1 { background-color: blueviolet; } #btn-2 { background-color: red; } #btn-3 { background-color: green; } #btn-4 { background-color: cornflowerblue; } |
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.
){kind=link}