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

Sezai AlkanFrontend Developer

Sass-Scss #scss #sass #css #nesting

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;
}