SASS/SCSS nedir, nasıl kullanılır? Koala uygulaması kurulumu ve kullanımı.

 SASS nedir?

Arkadaşlar SASS ruby dilini kullanan CSS ve CSS3 stil kodlarını dinamik olarak derleyen bir teknolojidir. SASS kullanmak için öncelikle Ruby Installer kurmanız gerekir. Ruby kurduktan sonra başlat menusunde Start Command Prompt with Ruby  isimli program belirecektir. Bu programı çalıştırarak gem install sass  komutlarını girmeniz gerekir. Bu durumda bilgisayarınıza SASS yüklenmiş olacaktır. Ardından SASS `ın kendi sitesinde paylaşılan uygulamalardan birtanesini indirip kurmanız gerekecektir. Ben örnek olarak çok tercih edilen uygulamalardan biri olan Koalayı göstermeye çalıştım.

SASS kendinde iki tür syntaxis barındırır. Biri SASS diğeri ise SCSS olarak isimlendirilmiştir. İkisi arasında çok ciddi bir fark yoktur fakat SCSS bizim için daha akılda kalıcıdır çünkü CSS yazım kurallarıyla aynıdır. İkisi arasındakı temel farkı aşağıdaki kod parçacıklarını inceleyerek ele alalım:

SASS:

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

Her iki kod parçaçığının ilk iki satrında $ işareti kullanılarak aynı php dilindeki gibi bir değişken oluşturulmuş : (iki nokta) işaretinden sonra değişkenin değeri belirtilmiştir. Fakat SASS ile yazarken sonlandırıcı (;) kullanılmamıştır. Bir diğer fark ise CSS kodlarını yazarken SASS syntaxisi ile çalışırken süslü parantez kullanılmamasıdır. Bunun dışında yazım kuralı olarak bir fark yok aslında.

Neden SASS kullanmalıyım?

Diceksiniz ki, normalde CSS ile yazsam yukarıdaki 2 satırı yazmayacaktım ve daha az kod yazmış olacaktım neden sass kullanayım? Şuanki durumda belki de haklısınız fakat projeniz büyüdükce CSS kodlarınız da artacak ve birçok yerde tekrar kodlar oluşturmaya, aynı renkleri, aynı font büyüklüklerini ve s. kullanmaya başlayacaksınız. Projenin sonuna doğru belki keşke şu rengi değil de, şu boyutu değilde başkasını kullansaydım diceksiniz ve belki yüzlerce satırda değişiklik yapmaya çalışacaksınız. Fakat SASS ile başta değişkenler belirleyerek CSS kodlarınızı derlerken bu değişkeni kullanabilir ve ilerleyen adımlarda gerek duyarsanız sadece değişkenin değerini değiştirerek yeniden CSS dosyanızı derleyebilirsiniz.

Bunun dışında iç içe css kodları yazma imkanı sağladığı gibi bir de CSS içerisinde mixin dediğimiz programlama dilinden aşina olduğumuz fonksiyona benzer tekniklerdan faydalana bilirsiniz. Örneğin bir mixin oluşturursunuz ve bu mixin içerisinde herhangi bir nesnesinin kenarlıklarını yucarlak yapmak için kodlar yazarsınız. İlerleyen adımlarda hangi nesneyi yuvarlak yapmak istiyorsanız bu mixini include ederek yuvarlaklık özelliğini kullanabilirsiniz. Tama iyi anlaşılması için aşağıdaki kodları inceleyelim:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

section { padding:10px; @include border-radius(10px); }

Gördüğünüz gibi bir border-radius isimli mixin oluşturduk ve section etiketinin ve sınıf adı box olan nesnenin kenarlıklarını oval yapmak için bu mixinmizi kullandık. Normal CSS ile yazmaya çalışsak yukarıda mixin içerisinde belirttiğimi kodları her iki nesne için tekrar tekrar yazmamız gerekecekti. Tabiki bu basit bir örnek fakat bu teknikleri öğrenerek çok daha hızlı ve detaylı CSS kodları yazabileceksiniz.

Daha detaylı bilgi için videoyu izleyebilir ve yeni videolardan haberdar olmak için kanalıma abone olabilirsiniz.