SCSS nedir?

SASS yazım şekli programlama dillerine daha yakındır.

SCSS ise SASS diline CSS’te kullanılan süslü parantez ve noktalı virgül eklenmiş halidir. (kullanımı aynı diyebiliriz)

SASS kullanımı aşağıdaki gibidir.

$font-family: Helvetica, sans-serif
$primary-color: crimson

Body
font: 100% $font-family
background-color: $primary-color
SASS dosya uzantısı .sass ile biter.

SCSS kullanımı aşağıdaki gibidir.

$font-family: Helvetica, sans-serif;
$primary-color: crimson;

body {
font: 100% $font-family;
background-color: $primary-color;

SCSS dosya uzantısı .scss ile biter.
SASS kurulumu

SASS derleyicisi Ruby ile geliştirildiğinden kullanabilmek için bilgisayarımıza Ruby kurmamız gerekiyor.

Kurulum için gerekli olan dosyayı http://rubyinstaller.org adresinden indirebilir ve kurulumu yapabilirsiniz.

Windows işletim sisteminde SASS kurulumu için Başlat Menüsünde Ruby kısayollarının bulunduğu klasördeki “Start Command Prompt with Ruby” ile komut istemcisini çalıştırın.

Ekrana gelen komut penceresine;

gem install sass

yazıp komutu çalıştırdığınızda SASS kurulacaktır. Komut penceresine aşağıdaki komutu yazarak kontrol edebilirsiniz.

sass -v

SASS kullanımı

SASS kodlarını yazdıktan dosyanın CSS dosyasına dönüştürülmesi için derlenmesi gerekir. Beraber bir örnek yapalım.

İlk olarak aşağıdaki SASS kodları ile bir style.scss dosyası oluşturalım. (siz istediğiniz ismi verebilirsiniz J)

$font-family: Helvetica, sans-serif;
$primary-color: crimson;

body {
font: 100% $font-family;
background-color: $primary-color;
}

Sonrasında komut istemcisine kaydettiğimiz klasör yolunu gösterelim. Ben C: altında “ders” klasörü oluşturup o şekilde kayıt etmiştim.

cd c:\ders (yani burada .scss dosyamızın yolunu göstermiş oluyoruz )
Komut istemcisine bu komutu yazarak klasöre erişimi sağlıyoruz.

sass style.scss:style.css
Bu komut sonrasında, SASS kodlarını CSS kodlarına çevirip style.css ismiyle aynı dizine kayıt edecektir. Bu işlemi sürekli tekrar etmek tabi ki zahmetli olacak. –watch parametresi ile her değişiklikte otomatik yapılmasını sağlayacağız.

sass –watch style.scss:style.css
Bu şekilde, komut penceresi açık olduğu sürece dosya içinde değişiklik yapıldığında SASS dosyalarını derleyecektir.

İşlem sırasında SASS önbellek dosyası ve klasörü oluşturur. Devre dışı bırakmak için –no-cache parametresini ekleyebilirsiniz.

sass –no-cache –watch style.scss:style.css
SASS genellikle büyük projelerde kullanıldığından SASS dosyaları ve CSS dosyaları ayrı dizinlerde tutulmakta ve klasör içerisindeki birden fazla SASS dosyası derlenmektedir.

Bunun için ders klasörünün içine SCSS isimli bir klasör açın SASS dosyalarınızı içine atın ve aşağıdaki komut satırını çalıştırın.

sass –no-cache –watch SCSS:CSS
Tüm SASS dosyaları derlenerek CSS ismindeki klasöre kopyalanacaktır.

SASS dosyaları derlendikten sonra map dosyası oluşturmaktadır devre dışı bırakmak için –source-map=none parametresini eklemeniz yeterli olacaktır.

Sass –no-cache –watch –sourcemap=none SCSS:CSS

CSS dosyasının sıkıştırılmış veya farklı biçimde çıktı vermesini istiyorsanız –style özelliğine nested (varsayılan), compact, compressed veya expanded değerini verebilirsiniz.

sass –no-cache –watch –sourcemap=none –style=compressed SCSS:CSS
Artık derlenen SASS dosyaları sıkıştırılmış CSS formatı biçiminde kaydedilecektir. Bu şekilde olması hız açısındanda daha uygun.

En çok kullanılan parametreler ile ilgili bilgilendirmeye çalıştım.

Diğer parametreler hakkında bilgi almak için komut satırına sass –help komutu yazmanız yeterli olacaktır.

Bu konu ile ilgili örneklerle bir devam yazım olacak.