SASS ve SCSS Nedir?

SASS ve SCSS kavramları Front-End geliştiricilerin karşısına mutlaka bir şekilde çıkıyor. Çıkış sebebini ve kullanım amacını okuyanlar ilk başta “gereksiz” gibi görse de sunduğu imkanlar ve yazım kolaylıkları nedeniyle bu teknolojiler zamanla olmazsa olmazlar arasına giriyor.

SASS’ın açılımı Syntactically Awesome Stylesheets’dir. Pek anlamlı olmasa da Türkçeye “Sözdizimsel Müthiş Stil Sayfaları” olarak çevrilebilir. Tanımından çok işlevine odaklanmak gerektiğini düşünüyorum. SASS’ı CSS’in programlama diline çevrilmiş hali olarak açıklayabiliriz. 

2006 yılında Hampton Catlin tarafından çıkarılmıştır ve bugün farklı isimler tarafından geliştirilmeye devam etmektedir. Ruby programlama dilinin paket yapısı baz alınarak geliştirilmiştir. Yani daha önce Ruby’de program geliştirdiyseniz SASS’a alışmanız hiç de zor olmayacak. 

Front-End geliştiriciler mutlaka fark etmiş olmalılar, bir yerden sonra CSS kodları tekrar eden bir yapıya bürünüyor. İç içe olan elemanlar için seçici yazılırkan uzun ifadeler oluşabiliyor. Aynı renk kodunu defalarca kopyala yapıştırmak zorunda kalınabiliyor. İşte SASS tam da bu durumlar için çıkartılmış bir yapıdır. Yani SASS bir CSS ön işlemcisidir. Sizin programlama dili mantığında ve yapısında yazdığınız kodları derleyip CSS kodları haline getiriyor.

SASS için CSS’in programlama dili halidir, diyebiliriz. SASS sayesinde değişkenler, iç içe yapılar, dosyaları parçalama ve sayfaya dahil etme (include), mixin dediğimiz ve programlamada fonksiyonlara benzetebileceğiz yapılar, miras alma yani kalıtım, if else gibi mantıksal kıyaslamalar, döngüler gibi birçok yapıyı kullanarak CSS dosyası oluşturabiliriz.

SASS kullanabilmek için aşağıdaki linkte yer alan yazılımlardan herhangi birini kullanabilirsiniz. Ancak benim tavsiyem bu tarz programlar yerine kullandığınız editöre SASS eklentisi kurmanız.Örneğin ben şu anda Visual Studio Code kullanıyorum ve Sass, Beautify Sass ve Live Sass Compiler gibi eklentiler ile kolayca SASS kodlarını CSS’e dönüştürebiliyorum.

https://sass-lang.com/install

SASS geliştirilirken Ruby programlama dili baz alındığı için CSS’te yer alan ; ve { } işaretleri kullanılmaz. Ayrıca girintiler oldukça önemlidir, her bir girinti iç içe yapı oluşturacaktır. 

SCSS Nedir?

SCSS’in açılımı ise Sassy Cascading Style Sheets’dir. SCSS genellikle SASS ile birlikte anılır. Çünkü arada sadece sözdizimi farkı vardır. Bildiğimiz gibi CSS’te class tanımlamak için { } işaretlerini, birden fazla özellik tanımlamak için ise ; işaretini kullanırız. Ancak SASS Ruby diline benzer bir yapıda çıkarıldığı için bu işaretleri desteklememektedir. Süslü parantez ve noktalı virgülün kullanılamaması CSS geliştiriciler için zor bir durumdu ve bu sorunu çözmek için SASS zamanla SCSS’e evrildi. 

SCSS ile SASS’ın mantığı ve kullanımı aynıdır. SASS’ın aksine SCSS noktalı virgül ve köşeli parantezler ile yazılır. 

İlk başta CSS’e alışkın olanlar için SASS yerine SCSS tercih etmek daha mantıklı görünebilir. Ancak temiz ve kurallı kod yazımı nedeniyle SASS da tercih edilmektedir. 

Dilerseniz küçük bir örnekle CSS, SASS ve SCSS’i kıyaslayalım.Diyelim ki ul > li > a şeklinde baist bir iç içe yapımız var ve biz ul, li ve a taglarına ayrı ayrı özellikler vermek istiyoruz. CSS ile bunu yapabilmek için aşağıdaki şekilde bir yapıya ihtiyacımız var.

ul {
  float: left;
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

ul li a {
  color: red;
}

Aynı kodu SASS ile yazdığımız zaman aşağıdaki gibi olacaktır. Gördüğünüz gibi iç içe yapılar için kod tekrarı yapmamıza gerek yok. Burada önemli bir not düşelim; ilerleyen derslerde de konusu mutlaka geçecektir ama değinmek istedim, iç içe yapılarda tab yani girinti oldukça önemlidir, girinti yapılan seçici, bir üst elemana bağlıdır anlamı taşır. 

ul 
    float: left;
    margin: 0;
    padding: 0

    li
        list-style: none

        a 
            color: red

Aynı kodları şimdi de SCSS ile yazalım. SASS’taki yapıya sadece köşeli parantez ve noktalı virgül eklendiğini göreceksiniz. SCSS’te girintilerin SASS’taki gibi bir önemi yok. Ancak temiz kod yazımı için tavsiye ederim.

ul {
    float: left;
    margin: 0;
    padding: 0;

    li {
        list-style: none;

        a { 
            color: red;
        }
    }
}

Bir sonraki içerikte SASS ve SCSS konularına devam edeceğiz İnşallah. Soru, görüş ve önerilerinizi yorum olarak belirtebilirsiniz. Hayırlı çalışmalar dilerim.