SASS (Syntactically Awesome Style Sheets) ve SCSS (Sassy CSS), CSS’in daha gelişmiş ve dinamik bir versiyonunu sunan önişlemci (preprocessor) dilleridir. Bu teknolojiler, CSS yazmayı daha kolay, düzenli ve verimli hale getirir. SASS ve SCSS, geliştiricilere değişkenler, fonksiyonlar, iç içe kurallar (nesting), mixin’ler ve kalıtım (inheritance) gibi özellikler sunar. Bu özellikler, CSS kodunun daha modüler ve yeniden kullanılabilir olmasını sağlar.
SASS ve SCSS Arasındaki Fark
SASS: Daha eski bir sözdizimine sahiptir ve .sass uzantısını kullanır. Satır sonlarında noktalı virgül (;) ve küme parantezleri ({}) kullanılmaz. Bunun yerine girintiler (indentation) kullanılır.
.container
width: 100%
margin: 0 auto
.box
background: blue
Copy
SCSS: CSS sözdizimine daha yakındır ve .scss uzantısını kullanır. CSS ile tam uyumludur ve mevcut CSS kodları SCSS dosyalarına doğrudan eklenebilir.
scss
width: 100%;
.container {
Copy
margin: 0 auto;
.box {
background: blue;
}
}
SASS/SCSS’in Temel Özellikleri
Değişkenler, renkler, font boyutları veya diğer stil değerlerini tek bir yerde tanımlamayı ve tekrar kullanmayı sağlar.