SASS nedir? nasıl kurulur? nasıl kullanılır?

SASS, Ruby dilini kullanarak CSS ve CSS3 stil kodları yazmamızı ve bunları dinamik olarak derlememizi sağlayan bir Ruby gem’ idir. SASS ile  ilgili detaylı bilgiye http://sass-lang.com adresinden ulaşabilirsiniz.

Genel hatlarıyla bakacak olursak CSS’ de bulunmayan değişken (variables) tanımlama, iç içe (nesting) olarak hazırlanmış seçiciler oluşturmak, CSS kodlarımızı yeniden kullanılabilir ve parametrik olarak çalışabilen parçalara bölmek (mixin), bir CSS tanımlamasının başka bir CSS tanımlamasından miras almasını sağlayan seçici kalıtımı (selector inheritance) yapmak gibi işlevlerini başlıca sıralayabiliriz.

Sass, Compass, Susy Kurulumu

Öncelikle sisteminizde Ruby ve Rubygems kesinlikle kurulu olmalıdır. ( OS X kullanıyorsanız zaten mevcuttur; bir update etmenizde fayda var, konsolu açıp $ gem update --system yazmanız yeterli olacaktır). Eğer ki OS X kullanıcısı değil iseniz Ruby ve Rubygems adreslerinde uygun sürümü indirip kurulumu basitçe yapabilirsiniz.

Ruby ve Rubygems’in kurulumunu/güncellemesini yaptıktan sonra Sass, Compass kurulumu için konsolumuzu açıp;

$ gem install compass yazarak COMPASS' ı kurabilirsiniz.

$ gem install sass ile SASS‘ ı kurabilirsiniz.

son olarak grid sistemini $ gem install susy ile kurarak kullanmaya başlayabiliriz.

CSS İle SASS Arasındaki Farklar

Variables (Değişkenler)

Aşağıdaki örnekte görebileceğiniz gibi, işimizi ne kadar kolaylaştırdığı gözükmetedir. Örnekte de görüldüğü gibi sadece değişkendeki renk kodunu değiştirerek bütün projedeki renk kodunu güncellebilmek mümkün.

CSS

.content-box {                            
  background-color: #2ca2af;            
  color: #000000;
  padding: 5px;
}
 
.content-box p {
  color: #2ca2af;
  margin: 6px;
}

SASS                                      

$site-blue: #3bbfce;                      
$site-black: #000;                            
                                                              
.content-box {                            
  background-color: $site-blue;            
  color: $site-black;
}
 
.content-box p {
  color: lighten($site-black, 20%);
}

Yukarıdaki SASS bölümünde bulunan lighten($site-black, 20%) siyah rengin yüzde 20 oranında açık rengini elde etmenizi sağlıyor. Bunun darken($red, 20%) yüzde 20 koyu renk elde eden ve rgba($site-black, .7) renge transparanlık kazandıran alfa değeriyle kullanılan kullanımları mevcuttur.

Nesting Selectors (İç İçe Seçiciler)

Bu örneğimizde ise karmaşık yapılarda çok karıştırdığımız ve kod tekrarına düştüğümüz de karmaşıklaşmaya engel olan hayatımızı kolaylaştıran kullanımını görebilirsiniz.

CSS

.content-box {                            
  background-color: #2ca2af;            
  color: #000000;
  padding: 5px;
}
 
.content-box p {
  color: #2ca2af;
  margin: 6px;
}

SASS                                      

$site-blue: #3bbfce;                      
$site-black: #000;                            
                                                              
.content-box {                            
  background-color: $site-blue;            
  color: $site-black;
  p {
     color: lighten($site-black, 20%);
  }
}
 

Görüldüğü gibi her şeyi tekrarlayarak alt alta yazmak yerine, kapsayıcısının altına/içine alarak daha temiz ve okunaklı bir kod elde edebiliyoruz.

Mixins (CSS Fonksiyonları)

Aşağıdaki örnekte content-box isimli bir mixin var ve içerisinde bazı özellikler tanımlı. Bunun sayesinde; ne zaman bir content-box’a ihtiyaç duyarsanız, o seçicinin içerisine @include content-box; yazmanız yeterli olacaktır.

SASS                                      

$site-blue: #3bbfce;                      
$site-black: #000;                            
                                                              
@mixing content-box ($bg-color:$site-black){  
  padding: 5px;                          
  background-color: $site-blue;            
  color: $site-black;
  p {
     color: lighten($site-black, 20%);
  }
}

.box{
   @include content-box
}

Selector Inheritance (Başka Bir Class’tan Özellikleri Miras Almak)

.error class’ının özelliklerini .newError class’ının içerisine @extend .error ile alabiliyoruz.

SASS                                                                 
                                                              
.error {                       
  border: 1px solid #f00;            
  color: #ddd;
}
.newError {
   @extend .error;
   border-width: 2px;
}

Yeni Bir Projeye Başlarken Kullanımı

Yeni bir projeye SASS kullanarak başlamak için yapmanız gerekenler Konsolda projenizin dizinine geliyorsunuz (örneğin /project/) arkasından $ compass create klasorunuzun_adi -r susy -u susy yazdıktan sonra sizin için projenizin içerisine SASS ve CSS dosyalarını oluşturuyor.

Klasör isimlerini config.rb isimli dosyadan istediğiniz gibi yapılandırabilirsiniz.

css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascript"

Genelde ‘stylesheets’ ve ‘javascript’ klasörlerinin isimlerini değiştirilmektedir. (‘css’ ve ‘js’ olarak). Tercihen bu işlemi de yaptıktan sonra artık çalışmaya başlayabilirsiniz. Başlamak için tekrar konsola dönüp, config.rb dosyasının bulunduğu klasörün içine girip:

Eğer config.rb dosyasında değişiklik yaptıysanız, konsola sırasıyla:

$ compass clean
$ compass compile

yazmanız gerekiyor çünkü klasör isimlerini değiştirdiğiniz için yeni CSS çıktılarını almamız gerekiyor.

Eğer ki değiştirmediyseniz veya değiştirip yukarıdaki işlemleri tamamladıysanız artık yazmaya başlayabiliriz.

Konsolu açıp $ compass watch yazıyoruz ve konsolu açık bırakıyoruz. Bu önemli bir nokta bu komutu verdikten sonra, compass artık sizin SASS dosyalarında yaptığınız değişiklikleri sürekli olarak dinleyip yeni css çıktıları üretiyor. Bu sayede yazdığınız SASS dosyaları CSS’e çevriliyor olacaktır.

Artık projenizin project/klasorunuzun_adi/sass dizininde bulunan ‘base.scss’ ve ‘screen.scss’ dosyalarına kodumuzu yazmaya başlayabiliriz.