Sass ile sürdürülebilir CSS yazmak

Başlangıçta CSS tek bir dosyada yönetilebilir. Proje büyüdükçe o dosya şişiyor, renk kodlarını bulmak için dosyada arama yapıyorsunuz, bir yerde değişiklik yapınca başka yerde bir şeyin bozulduğunu fark ediyorsunuz. Bu noktada “daha iyi bir yol olmalı” diye düşünmek kaçınılmaz.

Sass (Syntactically Awesome Style Sheets), CSS’in özelliklerinin üstüne değişken, iç içe kural, mixin ve modülerlik gibi kavramlar ekleyen bir preprocessor’dır. Yazdığınız .scss dosyaları derlenerek standart .css dosyasına dönüşür — tarayıcı yalnızca CSS görür.

Bu yazıda Sass’ın projelerime en çok katkı sağlayan özelliklerini aktarıyorum.

Kurulum

Node.js kuruluysa node-sass paketi işi görüyor:

npm install --save-dev node-sass

package.json’a derleme komutu ekliyorum:

{
    "scripts": {
        "sass": "node-sass src/scss/main.scss public/css/main.css --watch"
    }
}

--watch bayrağı dosyaları izleyip her değişiklikte otomatik derleme yapıyor.

Değişkenler

Renk, tipografi ve aralık değerlerini değişkenlerde tutmak, bir değeri değiştirmenin tek yerde yapılmasını sağlıyor:

// _degiskenler.scss

$renk-birincil:   #3498db;
$renk-ikincil:    #2c3e50;
$renk-tehlike:    #e74c3c;
$renk-basari:     #27ae60;

$font-boyutu-kucuk:   12px;
$font-boyutu-normal:  16px;
$font-boyutu-buyuk:   20px;

$bosluk-kucuk:   8px;
$bosluk-orta:    16px;
$bosluk-buyuk:   32px;

$kenar-yari:     4px;

Bu dosyayı tüm sayfalarda içe aktarıyorum. Ana rengi değiştirmem gerektiğinde yalnızca $renk-birincil değerini güncelliyorum; her yerde otomatik yansıyor.

Bir projede müşteri marka rengini değiştirdi. Sass değişkenleri olmadan bu değişiklik saatler alırdı; tek bir değer güncellemesi tüm arayüze yansıdı. Bu deneyimden sonra yeni projelerde değişkenleri geniş tutmayı alışkanlık haline getirdim.

İç içe kurallar

CSS’te .kart, .kart-baslik, .kart-icerik gibi birbiriyle ilişkili seçicileri tekrar tekrar yazmak gerekiyor. Sass ile bunu iç içe yazabiliyorum:

.kart {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: $kenar-yari;
    padding: $bosluk-orta;

    .kart-baslik {
        font-size: $font-boyutu-buyuk;
        font-weight: bold;
        margin-bottom: $bosluk-kucuk;
        color: $renk-ikincil;
    }

    .kart-icerik {
        font-size: $font-boyutu-normal;
        color: #555;
    }

    &:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

& sembolü üst seçiciye atıfta bulunuyor — .kart:hover anlamına geliyor. Bu yazım biçimi, CSS’in ürettiği çıktıyla aynı sonucu veriyor ama kaynak dosya çok daha okunabilir.

Dikkat ettiğim bir nokta: iç içe yazımı aşırıya kaçırmamak. Dört, beş seviye iç içe geçmiş kural üretilen CSS’i karmaşıklaştırıyor ve specificity sorunlarına yol açıyor. Üçten fazla seviyeye indiğimde genellikle bu bileşenin yapısını yeniden gözden geçiriyorum; çok derin iç içe geçme çoğunlukla HTML yapısına bakışı kaybetmenin işareti.

Mixin ile tekrar eden kuralları toplamak

Mixin, tekrar eden CSS bloklarını tek tanımda toplamak için kullanılıyor. Medya sorguları için sık başvurduğum bir örnek:

@mixin mobil {
    @media (max-width: 768px) {
        @content;
    }
}

@mixin tablet {
    @media (min-width: 769px) and (max-width: 1024px) {
        @content;
    }
}

// Kullanım
.kutu {
    width: 300px;

    @include mobil {
        width: 100%;
    }

    @include tablet {
        width: 50%;
    }
}

Her bileşenin responsive davranışını o bileşenin stillerinin yanında tutabiliyorum — ayrı bir medya sorgusu bloğu aramak yerine.

Dosyaları parçalara bölmek

Tek bir main.scss yerine her konuyu kendi dosyasına taşıyorum. Alt çizgiyle başlayan dosyalar (partial) bağımsız derlenmez, yalnızca @import ile dahil edilir:

scss/
├── _degiskenler.scss
├── _sifirla.scss
├── _tipografi.scss
├── _butonlar.scss
├── _formlar.scss
├── _kart.scss
├── _navigasyon.scss
└── main.scss

main.scss bu dosyaları bir araya getiriyor:

@import 'degiskenler';
@import 'sifirla';
@import 'tipografi';
@import 'butonlar';
@import 'formlar';
@import 'kart';
@import 'navigasyon';

Derleme sonucunda tek bir main.css üretiliyor; HTTP isteği sayısı artmıyor. Ama kaynak dosyalar organize ve bulunabilir.

Extend ile kod tekrarını azaltmak

İki seçicinin ortak özelliklerini paylaşması için @extend kullanılabiliyor:

%bildirim-temel {
    padding: $bosluk-kucuk $bosluk-orta;
    border-radius: $kenar-yari;
    font-size: $font-boyutu-kucuk;
}

.bildirim-bilgi {
    @extend %bildirim-temel;
    background: lighten($renk-birincil, 40%);
    color: $renk-birincil;
}

.bildirim-tehlike {
    @extend %bildirim-temel;
    background: lighten($renk-tehlike, 40%);
    color: $renk-tehlike;
}

% ile tanımlanan yer tutucu seçici, tek başına CSS çıktısı üretmiyor; yalnızca @extend ile dahil edildiğinde kullanılıyor.

@extend ile mixin arasında seçim yaparken şu soruyu soruyorum: bu ortak stiller her zaman birlikte mi kullanılacak? Evetse @extend mantıklı. Farklı değerlerle parametrik kullanım gerekiyorsa mixin daha uygun. @extend ürettiği CSS çıktısında seçicileri birleştirdiğinden dikkatli kullanılmadığında beklenmedik seçici kombinasyonları oluşabiliyor.

---

Sass’ı kullanmaya başladıktan sonra düz CSS dosyasına dönmek istemedim. Değişkenler ve modüler yapı tek başına büyük bir kazanım. Mixin ve extend’i yerli yerinde kullanmak biraz pratik gerektiriyor, ama ilkelerini kavrayınca yazdığınız CSS çok daha bakımlı hale geliyor.