SASS yani syntactically awesome style sheets (sözdizimsel müthiş stil sayfaları) CSS'yi bir programlama dili gibi kullanmamızı sağlar ve CSS içinde ihtiyaç duyduğumuz bir çok özelliği içinde bulundurur.
SASS sayesinde CSS dosyamızı daha pratik ve daha okunabilir şekilde yazabilmekteyiz. Üstte de belirttiğim üzere SASS ile CSS'i programlama dili gibi organize edebilmekteyiz.
SASS'in içinde kullanabileceğiniz programlama örnekleri;
- Değişkenler (variables),
- Döngüler (for, each, while),
- Karar yapıları (if, else),
- Fonksiyonlar,
- Seçiciler (selector).
Bunlara ek olarak SASS içinde CSS'deki gibi noktalı virgül ";" ya da süslü parantezler ({}) kullanılmamaktadır. SASS ilk ortaya çıktığında sözdizimi olarak Ruby'e benzer planlanmıştı. Ancak geliştiricilerin CSS'den kalan alışkanlıkları düşünülerek sözdizimi SCSS olarak değiştirildi.
SASS'dan başka CSS popüler CSS istemcileri aşağıda listelenmiştir.
- LESS
- Stylus
- PostCSS
Baştaki paragrafta SASS'ın dinamik yapısından ve programlama diline benzediğinden bahsetmiştik. Aşağıda bir kaç örnek kod bloğu bulabilirsiniz.
$site-font: "Helvetica, sans-herif"; $site-renk: #a5a5a5; p { font-family: $site-font; color: $site-renk; }$baslikBoyutu: 24px;*section h2 { font-size: $baslikBoyutu; }.icerik h2{ font-size: $baslikBoyutu; }