SASS ve SCSS Nedir?

SASS ve SCSS kavramları Front-End geliştiricilerin karşısına kesinlikle bir halde çıkıyor. Çıkış sebebini ve kullanım amacını okuyanlar ilk başta “gereksiz” şeklinde görse de sunmuş olduğu imkanlar ve yazım kolaylıkları sebebiyle bu teknolojiler zaman içinde eğer 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ş Yoldam Sayfaları” olarak çevrilebilir. Tanımından oldukça işlevine odaklanmak icap ettiğini düşünüyorum. SASS’ı CSS’in programlama diline çevrilmiş hali olarak açıklayabiliriz. 

2006 senesinde Hampton Catlin tarafınca çıkarılmıştır ve bugün değişik adlar tarafınca geliştirilmeye devam etmektedir. Ruby programlama dilinin paket yapısı baz alınarak geliştirilmiştir. Şu demek oluyor ki daha ilkin Ruby’de program geliştirdiyseniz SASS’a alışmanız {hiç de} zor olmayacak. 

Front-End geliştiriciler kesinlikle farkına varmış olmalılar, bir yerden sonrasında CSS kodları yeniden 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 onlarca defa kopyala yapıştırmak zorunda kalınabiliyor. İşte SASS tam da bu durumlar için çıkartılmış bir yapıdır. Şu demek oluyor ki 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 yardımıyla 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 kısaca kalıtım, if else şeklinde mantıksal kıyaslamalar, döngüler şeklinde birçok yapıyı kullanarak CSS dosyası oluşturabiliriz.

İlgili Makaleler
  • En İyi Antivirüs Programları

  • Site Haritası Nedir VeNasıl Oluşturulur?

SASS kullanabilmek için aşağıdaki linkte yer edinen yazılımlardan herhangi birini kullanabilirsiniz. Sadece benim tavsiyem bu biçim programlar yerine kullandığınız editöre SASS eklentisi kurmanız.Mesela ben şu anda Visual Studio Code kullanıyorum ve Sass, Beautify Sass ve Live Sass Compiler şeklinde 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 edinen ; ve { } işaretleri kullanılmaz. Ek olarak 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 çoğu zaman SASS ile beraber anılır. Şundan dolayı arada yalnız sözdizimi farkı vardır. Bildiğimiz şeklinde CSS’te class tanımlamak için { } işaretlerini, birden fazla özellik tanımlamak için ise ; işaretini kullanırız. Sadece SASS Ruby diline benzer bir yapıda çıkarıldığı için bu işaretleri desteklememektedir. Süslü ayraç ve noktalı virgülün kullanılamaması CSS geliştiriciler için zor bir durumdu ve bu problemi çözmek için SASS zaman içinde 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. Sadece temiz ve kurallı kod yazımı sebebiyle SASS da tercih edilmektedir. 

Isterseniz minik 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 süre aşağıdaki şeklinde olacaktır. Gördüğünüz şeklinde iç içe yapılar için kod tekrarı yapmamıza gerek yok. Burada mühim bir not düşelim; ilerleyen derslerde de mevzusu kesinlikle geçecektir fakat değinmek istedim, iç içe yapılarda tab kısaca girinti oldukça önemlidir, girinti meydana getirilen 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 yalnız köşeli ayraç ve noktalı virgül eklendiğini görmüş olacaksınız. SCSS’te girintilerin SASS’taki şeklinde bir önemi yok. Sadece 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 mevzularına devam edeceğiz İnşallah. Sual, görüş ve önerilerinizi yorum olarak belirtebilirsiniz. Hayırlı emek harcamalar dilerim.