SASS/SCSS
SASS web sayfası tasarlarken CSS içerinde bulunmayan özellikleri kullanmamıza imkan veren CSS derleyicisidir.
SASS#
(Syntactically Awesome Style Sheets)
SASS Nedir?#
- Sass CSS ön işlemcisidir.
- Dinamik bir şekilde CSS yazmayı sağlar.
- CSS’de bulunmayan birçok özelliği barındırır.
- Sass, dünyadaki en olgun, istikrarlı ve güçlü profesyonel düzeyde CSS uzantı dilidir.
SASS Nasıl Çalışır?#
Web tarayıcıları Sass kodlarını yorumlayamazlar dolayısıyla Sass kodları yazıldıktan sonra CSS dosyasına yazmak için compiler edilmelidir.
Neden Sass Kullanmalıyız?#
- Sass ile döngüler, karar yapıları, fonksiyonlar, operatörleri de kullanarak hızlı ve daha doğru çalışan bir css kodlaması yapabilirsiniz.
- Binlerce satırlık CSS kodlarını daha hızlı yazmamızı, daha düzenli bir stil dosyası oluşturmamıza olanak tanır.
SCSS#
SCSS basitçe Sassy CSS anlamına gelir. Sassy CSS, Vanilla(normal) CSS'de bulunmayan özellikleri kullanmanıza izin veren bir CSS ön işlemcisidir.
SCSS Nedir?#
En çok kullanılan css ön-işlemcilerinden biridir. Kütüphanemizi oluştururken bu teknolojiyi kullandık.
CSS yazmayı dinamik hale getirmek için ortaya çıkan bir teknolojidir. CSS'te bulunmayan bir çok özelliği içinde bulundurmaktadır, değişken tanımlama, fonksiyon oluşturma, iç içe yapılar kullanma vb. SCSS hakkında daha detaylı bilgi edinmek kendi sitesini ziyaret edebilirsiniz.
SASS ve SCSS'te Değişken Tanımlama#
SASS ve SCSS dosyaları içinde değişken tanımlayarak font isimleri, renk kodları vb yapıların defalarca tekrar edilmesini önleyebiliriz. SASS ve SCSS'te değişken tanımlamak için değişken isminin başına $ işareti koyulur.
Basit bir değişken tanımlama işlemi aşağıdaki gibidir.
SASS İçin#
SCSS İçin#
V5 Sistemde SCSS Derleme#
Yazdığınız SCSS kodlarını derlemek için herhangi bir --watch yapmanıza gerek yoktur. Sistem tarafında otomatik derlenerek önyüze yansımaktadır.