SASS ve SCSS'te İç İçe Yapılar (Nesting)

Merhabalar, bu yazımda SASS ve SCSS'te iç içe yapılardan (nesting) bahsedeceğim. PSD tasarımları HTML'e dökerken iç içe yapılar oldukça sık kullanılır. Örneğin ul elemanı içerisinde li, li içinde de a gibi. Yani hiyerarşimiz ul>li>a şeklinde olmaktadır. Aşağıdaki örnekte bu senaryoyu somutlaştırabiliriz.

<ul>
    <li><a href="">Anasayfa</a></li>
    <li><a href="">Hakkımızda</a></li>
    <li><a href="">İletişim</a></li>
</ul>

Bu durumda saf CSS kullanarak üç elemana stil özellikleri vermek için aşağıdaki gibi bir yapıya ihtiyacımız vardır.

ul {
    margin: 0;
    padding: 0; 
}
ul li { 
    float: left;
    list-style: none
}
ul li a {
    background: #222;
    color: #fff
}

Görüldüğü gibi iç içe yapılar için seçiciler yazılırken tekrarlar meydana gelmektedir. İşte SASS ve SCSS bu durumda oldukça pratik bir kullanım sunmaktadır.

Yukarıdaki kod bloğunun SASS'taki karşılığı aşağıdaki gibidir.

ul 
    margin: 0
    padding: 0 

    li
        float: left
        list-style: none

        a
            background: #222
            color: #fff

Gördüğünüz gibi CSS'de ul li veya ul li a şeklinde uzayan seçiciler SASS'ta görülmemektedir. Bu örnekte girintiler oldukça önemlidir. Her bir girinti o elemanın bir üst elemana ait olduğunu belirtir. Bu yüzden dikkatli olmamız gerekmektedir.

Gelelim aynı örneği SCSS'de yapmaya. SCSS'de süslü parantezler scope yani kapsama alanını belirlediği için girintilerin bir önemi yoktur. Ancak bir eleman, süslü parantezleri içinde bulunduğu elemana bağlıdır. Bunu unutmamaız gerekmektedir. Ben yine de düzgün görünmesi için girintilere önem vermekteyim.

ul {
    margin: 0;
    padding: 0; 

    li {
        float: left;
        list-style: none;

        a {
            background: #222;
            color: #fff;
        }
    }
}

SCSS'de de SASS'ta olduğu gibi seçici isimleri ul li veya ul li a gibi uzamadı. Sadece iç içe geçmiş üç elemana stil vermek için bile bu kadar kolaylık sağladığını göz önünde bulundurarak iç içe geçmiş 4-5 elemanda ne kadar büyük kolaylık sağlayacağını tahmin edebilirsiniz.

Başka bir örnekle devam edelim. İçerisinde başlık ve yazı barındıran icerik adında bir div'imiz olsun.

<div id="icerik">
    <h1>Samsunspor Yine Galip!</h1>
    <p>Samsunspor evinde karşlaştığı Pendikspor'u 2-0'la geçti.</p>
</div>

Saf CSS ile bu üç elemana özellik vermek için aşağıdaki gibi bir yapı kullanılmaktadır.

#icerik {
    float: left;
    width: 500px;
}

#icerik h1 {
    font-size:22px;
    font-family: 'Roboto',sans-serif;
}

#icerik p {
    font-size: 16px;
    font-family: 'Roboto',sans-serif;
}

Görüldüğü gibi #icerik ifadesi her alt seçici için tekrar tekrar yazılmak zorunda. Ancak aynı kodları SASS'ta yazmak istediğimiz zaman aşağıdaki gibi olacaktır.

#icerik 
    float: left
    width: 500px

    h1 
        font-size: 22px
        font-family: 'Roboto',sans-serif

    p 
        font-size: 16px
        font-family: 'Roboto',sans-serif

Burada h1 ve p elementlerininin seçicilerinin aynı girintide olduğuna dikkat ediniz. Çünkü HTML yapısında h1 ve p elemanları aynı seviye elemanlarıdır.

Aynı örneği SCSS ile yapalım. Sadece noktalı virgül ve köşeli parantezler gelecektir.

#icerik {
    float: left;
    width: 500px;

    h1 {
        font-size: 22px;
        font-family: 'Roboto',sans-serif;
    } 

    p {
        font-size: 16px;
        font-family: 'Roboto',sans-serif;
    }
}