sass

Sass nedir ?

Uzunca bir zamandır planlayıp iş yogunlugundan nihayet kolları sıvama fırsatı bulabildiğim Sass ve Compass artık alet çantama bizzat alınmış bulunuyor. Burada sizlere kısaca nasıl kurup nasıl kullanabileceğinizi anlatmak istiyorum. Henüz çok yeni olsamda, bu konuda uzmanlaştıkça daha detaylı yazılar yazmaya devam edeceğim. Birbirinin devamı niteliğinde olan bu iki konunun ilki olan Sass ile anlatıma başlamak istiyorum. Ayrıca ilişkili olarak Compass nedir ? […]

Uzunca bir zamandır planlayıp iş yogunlugundan nihayet kolları sıvama fırsatı bulabildiğim Sass ve Compass artık alet çantama bizzat alınmış bulunuyor. Burada sizlere kısaca nasıl kurup nasıl kullanabileceğinizi anlatmak istiyorum. Henüz çok yeni olsamda, bu konuda uzmanlaştıkça daha detaylı yazılar yazmaya devam edeceğim. Birbirinin devamı niteliğinde olan bu iki konunun ilki olan Sass ile anlatıma başlamak istiyorum. Ayrıca ilişkili olarak Compass nedir ? malaesini de okumanızı tavsiye ederim.

Sass Nedir ?

Saas, Ruby dilini ve yalınlığını sevenler için benzer bir yaklaşımla CSS ve CSS3 stil kodları yazmanızı ve bunları dinamik olarak derlemenizi sağlayan bir ruby gem’ idir. Adresi ise http://sass-lang.com/ ‘dır. Genel hatlarıyla özetlemek gerekirse; CSS’ de bulunmayan değişken (variables) tanımlama, iç içe (nesting) olarak hazırlanmış seçiciler oluşturmak, css kodlarını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 sayabilirim.

Sass nasıl kurulur ve kullanılır ?

Kurulumu ve kullanımı oldukça basittir. Sisteminizde Ruby’nin kurulu olduğunu varsayıyorum. Eğer ruby kurulu değilse Onur Özgür Özkan‘ın şu makalesine bir göz atabilirsiniz.

Aşağıdakı adımları izleyin;

$ gem install sass

$ mv style.css style.scss

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

  • 1. satırdaki işlem bir ruby gem kurulum komutudur. Bu aşamada sisteminize sass gem’ i ve gerekli bağımlılıkları kurulacaktır. Konsola sass -v yazarak kurulumu kontrol edebilirsiniz.
  • 2. satırda ise şu anda bulunduğunuz dizindeki style.css dosyasının uzantısı style.scss olarak değiştirilmektedir
  • 3. ve son adımda ise sass komutuna –watch parametresiyle style.scss deki değişikliklerden style.css ‘in dinamik olarak derlenmesi sağlanıyor. Bu komutu çalıştırdığınızda konsolda sass sürekli çalışacaktır. CTRL + C komutu ile işlemi durdurabilirsiniz. Çalışma sırasında aşağıdakı gibi bir çıktı alacaksınız konsoldan;
>>> Sass is watching for changes. Press Ctrl-C to stop.

create style.css

FSSM -> An optimized backend is available for this platform!

FSSM ->gem install rb-inotify

>>> Change detected to: style.scss

overwrite style.css

Son satırdakı değişikliğin algılanması için terminal açık ve sass arkaplanda çalışırken gidip style.scss dosyama şu satırları ekledim ve değişiklikleri kaydettim. Bu aşamada önce css dosyası oluşturudu ve değişiklikler scss dosyasından derlenip css dosyasına tekrar yazıldı;

style.scss

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color:

    darken($blue, 9%);

}

.border {

  padding: $margin / 2;

  margin: $margin / 2;

  border-color: $blue;

}

Bu kodun oluşturduğu css çıktısı ise aşağıdaki gibidir;

style.css

.content-navigation {

  border-color: #3bbfce;

  color: #2ca2af; }

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce; }

Alternatif olarak birde belirttiğiniz dizinin altındaki tüm scss dosyalarını algılayıp belirttiğiniz başka bir dizine derleyen şöyle bir kullanım da mevcut;

$ sass --watch stylesheets/sass:stylesheets/compiled

Gördüğünüz gibi sass kullanmak oldukça kolay ve kullanışlı. Sass hakkında aslında anlatılacak daha çok konu var ama burada kısa kesip biraz da Compass‘ dan bahsetmek istiyorum. Öncesinde Sass’ la ilgili birkaç  kaynağı sizlerle paylaşayım;

Kaynaklar;

Evet Sass ile ilgili anlatılacaklarım şimdilik bu kadar. Ancak ben de bu konudaki çalışmalarıma yeni başladığım için zaman içinde daha kapsamlı makalelerle karışınıza çıkmayı planlıyorum. Umarım sizlere faydalı olmuştur
İlişkili makale: Compass nedir ?
İyi çalışmalar dilerim.