Sass-Scss Nesting İç içe Kullanımı

sezaialkan
Sezai Alkan Frontend Developer

Sass ta Nesting İç içe Seçicilerde html deki oluşturduğumuz alt elemanlar için uzun ifadeler ile seçmek yerine alt alta yazarak daha okunabilir bir hale yazılabilmektedir.

<div class="stil">
    <a href="#">Tıkla Beni</a>
</div>

Yukarıdaki örnekte stil sınıfı tanımlı olan divin altındaki a Elemanını seçmek için .stil a veya .stil>a gibi kullanımlar yazmamız gerekmektedir.

.stil 
    font-size: 2rem
    font-family: 'Roboto' sans-serif;

    a 
        color: red 

        &:hover
            font-size: 3rem 

Sass ta stil sınıfı tanımlı olan divin altındaki a Elemanını seçmek için yukarıdaki gibi girintili yazı biçimini kullanabiliriz. Stil Sınıfının altında seçeceğimiz elemanları stil özellikleri ile aynı hizada yazmamız gereklidir.

Yukarıdaki Sass örneğinin Css e dönüştürülmüş hali aşağıdaki gibidir.

.stil {
  font-size: 2rem;
  font-family: 'Roboto' sans-serif;
}

.stil a {
  color: red;
}

.stil a:hover {
  font-size: 3rem;
}

Scss de Nestin kullanımı ise Sass taki gibi birebir aynıdır fakat Scss de hizalamamış kesin kural olarak gözülmemektedir. stil sınıfımızın Süslü parantezleri içerisinde tanımlamamız yeterli olacaktır.

.stil{
    font-size: 2rem;
    font-family: 'Courier New', Courier, monospace;

    a{
        color: red;

        &:hover{
            font-size: 3rem;
        }
    }
}

Yukarıdaki Scss örneğinin Css e dönüştürülmüş hali aşağıdaki gibidir.

.stil {
  font-size: 2rem;
  font-family: 'Courier New', Courier, monospace;
}

.stil a {
  color: red;
}

.stil a:hover {
  font-size: 3rem;
}

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol