Yücel Alkan

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

Bu sayfada yer alan içeriklere ait videolara aşağıdan ulaşabilirsiniz. 

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. 

06.09.2019
56339
Yorumlar
mustafa (24 Aralık 2019 - 23:44)
Teşekkürler
Cevapla
Ömer (02 Mayıs 2021 - 12:28)
Teşekkürler, tamda merak ettiğim konuydu :)
Cevapla
Anonim (30 Kasım 2021 - 15:13)
Tesekkurler
Cevapla
Fatih YILDIZ (21 Mart 2022 - 21:38)
Bu durumda sass veya scss ile otomatik derlenerek oluşturulan css dosyalarını html kodlarının içine eklediğimizde, sass ve css dosyaları da ilgili klasörde mevcut olması koşuluyla başka birşey yapmaya gerek kalmadan tarayıcı tarafından yorumlanabiliyor. Doğru mudur? Yani önce gerekli biçimlendirme kodlarını içeren bir sass dosyası oluştur. Bunu kaydettiğinde kendiliğinden oluşan .css ve .css.map şeklinde meydana gelen iki dosya ile birlikte bir de .html dosyanı at web sunucuna. Tarayıcı bunu derliyor ve sonucu çıkarıyor. Doğru mu söyledim?
Yücel Alkan (02 Nisan 2022 - 00:27)
Küçük bir yanlış anlaşılma söz konusu sanırım. Derleme işlemini tarayıcı yapmıyor. Tarayıcı sadece CSS dosyasına bakar. SCSS/SASS ve map dosyasına gerek yok. Map dosyası sadece ilgili class'ın hangi dosyada olduğunu gösterir. Derleme işlemini sizin yapmanız gerekiyor.
Cevapla
mert (03 Eylül 2022 - 14:41)
güzel yazı, faydalıydı teşekkürler
Cevapla
Yorum Yapın