Sass nedir? Neden muhteşemdir?

Yükleniyor

SASS Nedir?
SASS, Syntactically Awesome Style Sheets (Yazılışı Muhteşem Stil Dosyaları olarak çevrilebilir) daha yeni yeni keşfettiğim bir CSS Preprocessor’u (CSS Ön işlemcisi). Kafanız karışmış olabilir, karışmasın.

Ne?

SASS bir CSS Preprocessor’u. SASS’ın ne olduğundan önce preprocessor nedir, ne işe yarar ondan bahsetmekte fayda var. Css preprocessor’leri, daha hızlı ve kolay css yazmak ve belli bir süre sonunda stil dosyalarının karman çorman olmasını engellemeye yarayan, CSS’in programlanabilir olmasını sağlayan araçlardır. Siz preprocessor’ün size sunduğu formatta stilleri yazar, preprocessor bu stilleri CSS’e dönüştürür.

Preprocessor’lara örnekler: SASS (bu yazıda ondan bahsedeceğiz), LESS, Stylus, Myth ve dahası.

Neden CSS Preprocessor’lerinden birini kullanmalıyım?

Aslında kullanmak zorunda değilsin. Ufak çapta bir projede bir css preprocessor’ü kullanmamanın pek de bir zararı olmaz muhtemelen. Ancak .css dosyalarının binlerce satıra ulaştığı orta-büyük çaplı bir proje üzerinde çalışıyorsan muhtemelen yanlış bir şeyler yapıyorsundur.

Sözgelimi 27. satırda tanımladığın bir CSS değerini 643. satırda override ediyor olabilirsin ve bunu düzeltmek hiç de kolay olmaz.

SASS’ın faydaları

SASS’ı yaklaşık bir aydır WP Sözlük için kullanıyorum. Bu bir ayda karşılaştığım faydaları sıralamak gerekirse:

  • “Partial”lar. “sass” adında bir klasör oluşturup burada stil kodlarını ayrı ayrı dosyalar halinde yazma kolaylığı. Bu aynı zamanda projenin devamlılığına da aşırı katkıda bulunuyor.

    Şöyle ki, “sidebar”, “content”, “navigation” gibi partial’ler oluşturup bu dosyalara sadece o alanla ilişkili stilleri yazıyorum. Sidebar’a yeni bir alan eklediğimde bu alanın stillerini doğrudan _sidebar.scss’e ekliyorum (Partial’ler alt-tire “_” ile başlar). Navigasyon barında bir stil düzenlemesi yapmak istediğimde ise _navigation.scss’e bakıyorum.

    Ana dosyam olan style.scss‘de ise tüm partial’leri import ediyorum. Bu dosya bir “_” ile başlamıyor ve SASS bu dosyayı CSS’e dönüştüreceğinin farkına varıyor.

  • Mixin’ler ve değişkenler: PHP, JavaScript’te olduğu gibi CSS’te de fonksiyonlar ve değişkenler tanımlayabildiğinizi düşünün.

    Navigasyon alanı için bir arkaplan rengi belirleyin (örneğin $nav_bg_color) ve stillerde bunu kullanın. Rengi değiştirmek istediğinizde 15 css kuralını değiştirmek yerine sadece değişkeni değiştirmeniz yeterli olacak.

    Mixin’ler ise fonksiyonlar gibidir ve parametreler alabilir. Sürekli aynı şeyleri yazmak yerine tek bir satırda bu mixin’i değişkene dahil edebilmek muhteşem. Örneklerle gidelim.

    Mixin Örneği:

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

    Bu mixin’in kullanımı:

    .yuvarlak {
      @include border-radius(100%); // tam anlamıyla bir yuvarlak.
    }
    

    ve Sass bunu şu şekilde derler:

    .yuvarlak {
      -webkit-border-radius: 100%;
      border-radius: 100%;
    }
    

    muhteşem değil mi?

  • Nesting (İç içe geçme): CSS stillerini HTML gibi iç içe yazabildiğinizi düşünün. Bu ne işe yarar derseniz, yan menünüzü kaplayan .side isimli CSS sınıfının içindeki elementleri çok daha kolay bir şekilde düzenlemenizi sağlıyor. Ayrıca kodun devamlılığı (ileride bir ekleme yaparken kolaylık yaratması) da cabası.

    Bir örnek verelim:

    .article { // yazımızın bulunduğu seçici.
      width: 500px;
    
      h1 { // yazının başlığı
        font-weight: 600;
      }
    }
    

    ve Sass bu kodu şu şekilde derliyor:

    .article {
      width: 500px;
    }
    
    .article h1 {
      font-weight: 600;
    }
    

Nasıl Yüklenir

Sass bir Ruby gem’i olduğundan Önce Ruby’i yüklemelisiniz.

Windows için Ruby yükleyicisi

Komut isteminde ruby -v komutunu girerek Ruby’nin yüklenip yüklenmediğinden emin olun.

Ruby’nin yüklendiğinden emin olduktan sonra komut istemini (İpucu: Windows + R tuş kombinasyonu ile Çalıştır’a girin ve “cmd” yazıp Enter’a basın) kullanarak şu komutu girin:

gem install sass

Daha sonra komut isteminde sass -v komutunu girip Sass’ın yüklenip yüklenmediğini kontrol edebilirsiniz.

Nasıl Kullanacağım?

Sass komut istemi üzerinden çalışır. Sass’ı kullanırken her seferinde komut isteminden scss dosyalarını derlemek çok sıkıcı bir işlem olacağından watch komutuyla oto-pilota almak çok daha mantıklı olacaktır.

cd proje/dosyalarının/bulunduğu/ana/dizin
sass --watch sass:css

sass –watch sass:css komutu ile Sass’a şunu diyoruz: “Sevgili Sass, sass klasöründeki herhangi bir scss dosyası değiştiğinde tüm dizini derleyerek css klasöründe .css dosyası oluştur.” :)

Kapanış

Başlangıçta çok karmaşık gelse de Sass, hayatımızı epey kolaylaştıran bir araç. Sass’ı çok daha muhteşem kılansa yüzlerce eklenti ile dertlerimize deva oluyor oluşu. Yeni kullanmaya başlayanlar için ipuçlarınız ya da kullandığınız çok faydalı bir mixin varsa bizle paylaşmaktan çekinmeyin.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir