267.SASS ve SCSS Nedir ?

Bugün kullandığımız teknoloji bir ay sonra demode sayılıyor. Gün geçtikçe yeni yazılım dilleri, markup (betik) dilleri, frameworkler ve işlerimizi kolaylaştıran birçok yazılım projelerimizi daha verimli hale getiriyor.

SASS ve SCSS bunlardan bir tanesi. Sass 2006 yılında Hampton Catlin tarafından, CSS ve CSS3’ü Ruby diline benzer bir yapıyla geliştirmek fikri ile ortaya çıkan bir Ruby Gem’dir. 2008 yılına kadar Hampton tarafından geliştirilmeye devam eden Sass, şu anda Github üzerinde bulunan repo ile yüzlerce developer tarafından geliştiriliyor.

Sass kendi söz dizimiyle yazılmış kodları, editör yardımı ile CSS kodlarına çevirir. Genelde kullanılan editöre sass,scss plugin (eklenti) yardımı ile dahil edilir. Editör, her kayıt (save) sahnesinde yazılan SASS, önceden belirlenen yola CSS çıktısı olarak dosya halinde oluşur. Sass “*.sass” ve “*.scss” tarafından oluşturulan bu CSS dosyası projeye dahil edilerek kullanılır.

Derleme (compile) sırasında oluşturulan CSS dosyasını isterseniz otomatik olarak sıkıştırabilir *.min.css uzantılı ekstra bir CSS dosyası elde edip projenizde alternatif olarak kullanabilirsiniz.

SASS Nedir?.

SASS (Syntactically Awesome Stylesheets : Yazımsal Olarak Harika Biçim Sayfaları), CSS formatına derlenebilen dinamik bir biçim şablon dilidir. İlk olarak Hampton Catlin tarafından tasarlanmış ve Natalie Weizenbaum tarafından programlanmıştır. İlk versiyonların ortaya çıkmasını takiben Weizenbaum ve Chris Eppstein SASS içerisinde kullanılabilen basit bir betik dili olan SassScript'i geliştirerek SASS'ın kabiliyetlerini arttırmışlardır. SASS'ın ilk tasarımında yazım şekli Haml benzeri bir yapıda olup kod blokları girintilerle (indentation) ayrılmış, farklı SASS kurallarını ayırmak için ise yeni satır karakter kullanılmıştır. SASS'ın daha yeni yazım şeklide olan SCSS'te ise CSS'e daha yakın bir format kullanılmış, kod blokları süslü parantez ile kurallar ise noktalı virgül karakteri ile ayrılmıştır. Bu değişiklik sayesinde geçerli CSS kodları SCSS kodu olarak kullanılabilir hale gelmiştir.

Sass ile CSS yazarken; değişkenler (variables), döngüler (for, each, while), karar yapıları (if, else), fonksiyonlar (function, mixin), içe içe (nesting) seçici kullanımı, miras seçiciler (selector inheritance) veya diğer adıyla seçici kalıtımı kullanabilirsiniz.

Sass kullanırken CSS’te olduğu gibi noktalı virgül “;” ve parantez “{}” kullanılamamaktadır. Sass ruby dili baz alınarak oluşturulduğundan dolayı  böyleydi. fakat front-end olarak kullanıma sunulduğunda SCSS olarak yeniden tasarlandı.

SCSS Nedir?.

Scss yazarken CSS’ten alışık olduğumuz şekilde “;” ve “{}” gibi karakterleri kullanabiliyoruz.

$bg-color:#333
.menu
   background-color:$bg-color
   ul
      li a
         color:#fff

$bg-color:#333;
.menu {
   background-color:$bg-color;
   ul {
      li a {
         color:#fff;
      }
   }
 }

.menu {
   background-color:#333;
}
.menu ul li a {
   color:#fff;
}