Sass, CSS kullanırken değişkenler, döngüler ve kontroller kullanabilmemizi sağlayan ayrıca iç içe CSS kodu yazımını da destekleyen en popüler ön derleyiciler den(pre-processor) biridir. Sass ile önceden bir çok değişken ve mixin’ler(fonksiyonlar) oluşturup daha sonra bunları istediğiniz yerde kolayca kullanabilir,  daha önce oluşturduğunuz bir kod blokunu başka bir CSS kodu içinde çağırabilirsiniz.

Sass kurulumu:

Sass’ı kullanabilmek için iki seçeneğiniz var. Bunlardan biri hazır programlardır. Bu linkte APPLICATIONS kısmındaki programlardan uygun olanı indirip kullanabilirsiniz.
Bir diğer seçenekte komut satırı ile kullanımdır.

Windows için Ruby ile Sass kullanımı:

Öncellikle eğer Ruby bilgisayarınızda kurulu değil ise kurmanız gerekmektedir. Kurulum tamamlandıktan sonra Ruby komut satırını açın ve aşağıdaki kodları yazın.

gem install sass

İşlemler bittikten sonra kurulumun tamamlanıp tamamlanmadığını kontrol etmek için Ruby komut satırına aşağıdaki kodu yazın.

sass -v

Eğer bir versiyon değeri dönüyor ise kurulum başarılı şekilde gerçekleşmiştir. Artık kullanımına geçebiliriz.
CSS kodlarımızı yazdığımız bir style.scss dosyamız olduğunu düşünelim. Scss dosyasını CSS’e çevirmek için Ruby komut satırımızı açıyoruz ve dosyamızın olduğu dizine geliyoruz. Hemen ardından aşağıdaki kodu yazıyoruz.

sass --watch style.scss:style.css --style compact

Yukarıdaki kodda yer alan –watch kısmı opsiyoneldir. Derlenen dosyada bir değişiklik olur ise otomatik olarak CSS’e dönüştürmesi için kullanılır. Eğer –watch kullanmaz iseniz koddaki her değişiklikte derlemeyi aynı komutu yazarak yapmak zorundasınız. –style compact kısmı da CSS çıktı stilidir. Aşağıda bahsedeceğim stillerden birini kullanabilirsiniz. Yukarıdaki kodda yer alan style.scss:style.css kısmı ise hangi dosyanın derleneceği ve çıktının hangi dosyaya yazılacağını belirler.

Eğer Windows kullanıyor ve sürekli Ruby komut satırı ile uğraşmak istemiyor ama harici yazılımlarda kullanmakta istemiyor iseniz aşağıda vereceğim kodları .bat dosyası olarak kayıt edip istediğiniz projede ihtiyacınıza göre düzenleyerek kullanabilirsiniz.

CMD "/K C:\(Ruby'nin bulunduğu klasör yolu)\bin\setrbvars.bat & sass --watch style.scss:style.css --style compact"

Yukarıdaki kod, kodu yazdığınız dosyayı çalıştırdığınız klasörde yer alan style.scss dosyasını style.css dosyasına compact stilinde derler ve bu işlem komut satırını kapatana kadar devam eder.

Söz dizimi

Sass’ın kendi söz dizimi haricinde Scss söz dizimi de vardır. Bu iki söz dizimi arasında ki fark Sass’ta CSS’ten alışık olduğumuz virgül ( , ) ve süslü parantez ( {} ) kullanımı bulunmuyor. Bu yüzden Scss söz dizimi, Sass’ta en çok kullanılan söz dizimi olmuştur.

Sass söz dizimi:

#main p
  color: #00ff00;
  width: 97%;
  .redbox
      background-color: #ff0000;
      color: #000000;

Scss söz dizimi:

#main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

CSS çıktısı:

#main p {
  color: #00ff00;
  width: 97%;
}
#main p .redbox { 
  background-color: #ff0000; 
  color: #000000; 
}

Sass’ın en büyük avantajlarından biride 4 farklı çıktı alabilme opsiyonudur. Bu sayede CSS kodlarınızı ne kadar karmaşık oluşturursanız oluşturun yapı CSS’e uygun olduğu sürece o size her zaman istediğiniz çıktıyı verecektir.

Çıktı stilleri:

Nested: Açık CSS çıktısı.

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

Expanded: Nested gibi açık CSS çıktısı verir. Nested stilinden farkı süslü parantezler ve satır dizilişidir.

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

Compact: Hafif sıkıştırılmış CSS çıktısı. (Bence en ideal CSS çıktısı. Sass derleyicisi olmadığında rahatlıkla çalışabilirsiniz ve hafif sıkıştırılmış olduğu için dosya boyutu da çok büyük olmayacaktır.)

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

Compressed: Sıkıştırılmış CSS çıktısı almak için kullanılır. Bu stil, CSS dosyalarınızın boyutunu küçültmenize ve böylelikle site açılış hızınızı azda olsa arttırmanıza yardımcı olacaktır.

#main{color:#fff;background-color:#000}#main p{width:10em}

Sass değişken kullanımı

Scss Kodu:

$textColor: #fff;
$bgColor: #000;
#main {
  color: $textColor;
  background-color: $bgColor;
}

CSS Çıktısı:

#main {
  color: #fff;
  background-color: #000;
}

Sass ile ilgili temel bilgileri öğrendiğimize göre hadi bir örnek yapalım.

Geçiş efekti fonksiyonu
SCSS Kodu:

@mixin transition($a:All,$b:0.2s,$c:ease) {
        transition:$a $b $c;
        -webkit-transition:$a $b $c;
        -moz-transition:$a $b $c;
        -o-transition:$a $b $c;
}
a{
    color: #000;
    @include transition();
    &:hover{
        color: #ccc;
    }
}

CSS Çıktısı:

a{
    color: #000;
    transition:All,0.2s,ease;
    -webkit-transition:All,0.2s,ease;
    -moz-transition:All,0.2s,ease;
    -o-transition:All,0.2s,ease;
}
a:hover{
    color :#ccc;
}

Kısaca, siz CSS kodlar iken Sass size kolaylık sağladığı gibi aynı zamanda düzenli bir kod yapısı oluşturmanıza da yardımcı olacaktır. Front-end çalışmalarda kesinlikle Sass kullanmanızı öneriyorum.

Ana görsel kaynağı: kieranhunter.co.uk