Hakkında Künye

SASS İle Programlanabilir CSS

Merhaba arkadaşlar, bu yazıda web geliştiricilerinin hayatlarını bir nebze olsun kolaylaştıran CSS önişlemcilerinden ve bu önişlemciler arasında en popülerlerinden biri olan SASS’tan (Syntactically Awesome Style Sheets) bahsedeceğim. Hazırsanız başlayalım.

Problem:

Yazdığınız proje biraz olsun karmaşıklaşmaya, “ufak” bir projeden “orta ölçekli” bir projeye dönüşmeye başladığında, stil dosyanızın (style.css diyelim) ne kadar karmaşık ve okuması zor bir hale geldiğini fark etmişsinizdir. Projenin sürdürülebilirliğine önem veriyorsanız, spagetti kodlardan tiksiniyorsanız bu duruma bir son vermeniz yararınıza olacaktır.

CSS Önişlemcileri Burada Devreye Giriyor

SASS, Less, Stylus gibi CSS önişlemcileri, önişlemcinin size sunduğu dilde -genelde CSS’e çok yakın bir dil olur bu- yazdığınız stilleri işleyerek CSS’e dönüştürmeye yarayan yazılımlardır. Bir web geliştiricisine “Hangi önişlemciyi kullanmalıyım?” diye sorarsanız muhtemelen size “Birini kullan da hangisi olduğu fark etmez.” yanıtını verecektir. Ben de bu görüşe katılmakla birlikte, yazımızın konusu SASS olduğundan, oradan devam ediyorum.

Nedir, ne değildir?

SASS’ın bir CSS önişlemcisi olduğundan bahsetmiştik. SASS, bir Ruby gem’idir. Stilinizi .scss formatında, SASS'ın size sunduğu imkanlarla (birazdan değineceğiz) yazarsınız ve Ruby kullanılarak bu dosya .css dosyasına çevrilir.

SASS bir sihirli yazılım değildir. SASS kullanabilmek için makul miktarda CSS bilgisine ihtiyaç duyarsınız. SASS sadece yazdığınız kodun daha derli toplu, sürdürülebilir ve rahat okunur olmasını sağlar.

Nasıl Kurulur?

SASS'ı komut istemi/terminal’den kullanabileceğiniz gibi CodeKit, Prepros, Compass.app vb. programlarla da kullanabilirsiniz. Bu yazıda terminal’den kullanımından söz edeceğiz. Böylelikle neler olup bittiği konusunda daha fazla farkındalığımız olacak.

Öncelikle Ruby’nin sisteminizde yüklü olması gerekiyor. Ruby yüklemek için sizi şöyle alalım: https://www.ruby-lang.org/tr/downloads/

Ruby’i yükledikten sonra kullanılabilir olduğundan emin olmak için:

$ ruby –v
-> ruby 2.1.3p242 falan filan

Komutunu çalıştırarak Ruby sürümünü çıktılandığından emin olun. Daha sonra SASS’ı yüklemek için:

$ gem install SASS

Komutunu kullanın. Düzgünce yüklendiğinden emin olmak için yine benzer bir komut kullanabilirsiniz:

$ sass –v
-> Sass 3.4.13 (Selective Steve)

Kullanmaya Başlamak

style.scss adında bir dosya oluşturun. Bu dosya SASS ile yazacağımız stil kodlarını barındıracak ve derlenerek style.css dosyasına kaydedilecek. Bu dosyayı favori metin editörünüzle (Notepad++ veya Sublime Text’i tavsiye ederim, ama not defteri bile iş görür) açın ve aşağıdaki örnek kodları yapıştırın:

@charset "UTF-8";
/*
 * Bu şeklinde yazılan yorumlar SASS derleyicisi tarafından dokunulmaz.
 * // şeklinde yazılan tek satırlık yorumlar ise yoksayılır
 * Bu nedenle lisans, isim soyisim gibi bilgileri bu şekilde yazmakta fayda var.
 *
 * @author Muhammet Arslantaş <mhtarslantas@gmail.com>
 */

 // Sass, partial sistemine de sahip. _ (alt-tire) ile başlayan scss dosyalarını
 // @import ile dosyaya dahil edebilirsiniz.
 // dosya adı _ ile başlıyorsa Sass derleyicisi tarafından gözardı edilir.

 // @import "reset"; // _reset.scss'yi dahil eder.

// Değişkenler: Bunlar bir yazılımcı için hayat kurtarıcı şeyler.
$max-width: 1240px;
$primary-color: #333;
$warning-color: red; 
$base-font: Tahoma, Verdana, Segoe, sans-serif;

// Mixin'ler: Programlama dillerindeki fonksiyon/method'lar gibiler.
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
      border-radius: $radius;
}

#container {
    width: $max-width;
}

// Mixin'leri @include komutu ile kullanabilirsiniz.
.article {
    border: 1px solid $primary-color;
    @include border-radius(5px);
}

.dialog {
    width: $max-width / 5; // çarpma-bölme, toplama-çıkarma gibi matematiksel işlemler kullanabilirsiniz.
}

.error-dialog {
    @extend .dialog; // başka bir seçicinin özelliklerini @extend ile kopyalayabilirsiniz.
    background-color: $warning-color;
}

// İç-iç geçme (Nesting): Belki de en çok seveceğiniz özellik.
nav#main-navigation {
    width: $max-width;
    background: $primary-color;

    #logo {
        margin: 0px;
        display: inline-block;
        float: left;
        width: 220px;

        a {
            background-image: url("../img/logo.png");
        }
    }

    ul {
        height: 25px;
        list-style: none;

        li {
            display: inline-block;
        }
    }
}

// Sıradan CSS kodunuzu da ekleyebilirsiniz.
.article {
    border: 1px solid #555555;
    width: 60%;
    float: left;
}

Daha sonra komut istemi/terminalde style.scss dosyanızın bulunduğu dizine ulaşıp şöyle bir komut çalıştırın:

$ sass style.scss style.css

Bu komut “Hey SASS, style.scss dosyasını oku ve derleyip style.css dosyasına yaz” demenin kısa halidir. SASS bir saniyeden az bir sürede derleme işlemini tamamlayıp hedef dosyaya yazar. Scss dosya/dosyalarının boyutuna göre bu süre değişkenlik gösterebilir.

Ve sonuç:

@charset "UTF-8";
/*
 * Bu şeklinde yazılan yorumlar Sass derleyicisi tarafından dokunulmaz.
 * // şeklinde yazılan tek satırlık yorumlar ise yoksayılır
 * Bu nedenle lisans, isim soyisim gibi bilgileri bu şekilde yazmakta fayda var.
 *
 * @author Muhammet Arslantaş <mhtarslantas@gmail.com>
 */
#container {
  width: 1240px; }

.article {
  border: 1px solid #333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px; }

.dialog, .error-dialog {
  width: 248px; }

.error-dialog {
  background-color: red; }

nav#main-navigation {
  width: 1240px;
  background: #333; }
  nav#main-navigation #logo {
    margin: 0px;
    display: inline-block;
    float: left;
    width: 220px; }
    nav#main-navigation #logo a {
      background-image: url("../img/logo.png"); }
  nav#main-navigation ul {
    height: 25px;
    list-style: none; }
    nav#main-navigation ul li {
      display: inline-block; }

.article {
  border: 1px solid #555555;
  width: 60%;
  float: left; }

/*# sourceMappingURL=style.css.map */

Ayrıca SASS geliştirme sürecinizi kolaylaştırmak için css dosyanıza “source mapping” de uygular. Böylelikle tarayıcıda uygulamanızı incelerken hangi stilin, hangi scss dosyasında yer aldığını kolayca anlayabilirsiniz.

İpucu: sass --watch ile oto-pilota geçin

Style.scss’i her değiştirdiğinizde tekrar tekrar terminale komut yazmak çok külfetli olacağından, sass --watch komutuyla SASS’a “Şu dosya(lar) değiştiğinde derle.” diyebilirsiniz. “styles” isimli klasörde “scss” ve “css” adında iki klasör olduğunu düşünelim. scss klasöründe tahmin edebileceğiniz gibi ana scss dosyası ve varsa partial’lar, css klasöründe ise bunların derlenmiş halleri yer alacak. Bu senaryo için örnek kullanım şu şekilde:

$ cd styles
$ sass --watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.

Ayrıca bu komuta “--style compressed” ekleyerek css çıktısının sıkıştırılmış olmasını sağlayabilirsiniz. Detaylı dokümantasyona göz atmanızda fayda var: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Kapanış

Bir yazılımcı için kendini tekrar etmemek ve projesinin sürdürülebilir kalmasını sağlamak çok önemli. Orta ve büyük ölçekli projelerde çalışırken ise bu ikisini sağlamak çok daha zor hale gelebiliyor. SASS ve muadilleri bu ihtiyaca karşılık vermek için doğdular. Eğer ufak bir projede, tek bir stil dosyasıyla rahatça çalışabiliyorsanız kesinlikle bir önişlemciyle uğraşmamalısınız. Yok eğer stil dosyanız 2000 satıra ulaştıysa ve içinde kayboluyorsanız, acilen bir önişlemciyle tanışmanızın zamanı gelmiş demektir.

Kaynak

İlginizi çekebilir:

Muhammet Arslantaş
- 6 -