# Sass ile sürdürülebilir CSS yazmak

> Büyüyen stil dosyalarını Sass değişkenleri, iç içe kurallar ve parçalara bölme ile nasıl düzene soktuğumu anlatıyorum.

- Yayın: 2016-12-04
- Kategori: Arayüz
- Etiketler: CSS, Sass
- Okuma süresi: 3 dk okuma
- Kaynak: https://www.muhammetsafak.com.tr/blog/sass-ile-surdurulebilir-css-yazmak/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
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:

```bash
npm install --save-dev node-sass
```

`package.json`'a derleme komutu ekliyorum:

```json
{
    "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:

```scss
// _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:

```scss
.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:

```scss
@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:

```scss
@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:

```scss
%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.