Sass Scss Nedir ?

Sezai AlkanFrontend Developer

Sass-Scss #sass #scss #css

Sass Css içerisinde yapamadığımız değişken tanımlama, kalıtım, döngüler, fonksiyon tanımlama vb gibi bir çok işlem yapmamıza olanak sağlamaktadır. Sass ın açılımı olarak Mükemmel Sözdizimsel Stil Sayfaları olarak türkçeye çevirilmiştir.

Sass kullanımında noktalı virgül(;) ve süslü parantez({}) kullanımı mevcut değildir bu nedenle insanların css den sonra Sass kullanımında zorlanması üzerine Scss ortaya çıkmıştır. Scss de ise Css gibi noktalı virgül(;) ve süslü parantezler({}) kullanılmaktadır. Sass ve Scss in arasındaki temel farklardan biri Sass Katı kurallara tabi tutarken Scss bu kurallara zorlamamaktadır bu kurallar Sass kullanımı sağlarken Söz diziminin bir düzene göre sağlmamız gerekirken Scss de bu işlem katı kural olarak tabi değildir.

Sass kurulumu

Sass kurulumu ve kullanımı için bir çok yol bulunmaktadır bunlarda biri npm Node.js üzerinden global veya bir klasör / projeye özel kurulum sağlanabilmektedir.

npm install -g sass

Bu kurulum sağlandıktan sonra Terminal üzerinde aşağıdaki gibi sass dosyamızı css olarak dönüştürebilmekteyiz.

sass example.sass example.css

Bu tarz ve daha fazla yardımcı komutlara sass-lang.com adresinden ulaşım sağlayabilirsiniz.

Sass Visual Studio Code Kurulumu

Bir diğer yol ise Visual Studio Code üzerinden Live Sass Compiler eklentisini kullanabilirsiniz. Bu eklenti ile yazdığınız sass dosyası anlık olarak izlenecek ve kayıt işlemi sağlamanız durumunda otomatik olarak css e dönüştürecektir. Eklentinin sağladığı büyük avantajlardan biri ise yapılan yazım yanlışlarının hatlarının size geriye döndürmesidir.

Sass Kullanımı

Sass kullanımı sağlarken yukarıda da belirttiğimiz gibi noktalı virgül(;) ve süslü parantez({}) kullanımı sağlanmamaktadır.

$renk : blue

body
    color : $renk

Yukarıdaki gibi kullanım sağlarken süslü parantez ve noktalı virgül kullanımı sağlanmadığı için bloklarımızı oluşturuken yazım yerlerine dikkat etmeliyiz. yazdığımız satırın konumunu Tab boşluğu ile belirlemekteyiz. Bir satır için bir tab boşluğu unutmamız, yazdığımız kodların çalışmamasına, kaymasına sebebiyet vermektedir.

$renk : blue;

body{
    color : $renk;
}    

Scss kullanımında Sass kadar katı kurallar mevcut değildir. Css den yeni geçiş sağlamış ve Sass a alışamayanlar için Scss biçilmiş kaftan olarak görülebilmektedir.