Sass/SCSS Rehberi: Değişkenler, Nesting, Mixin, Partial, Extend ve Fonksiyonlar

Sass/SCSS Nedir?

Sass (Syntactically Awesome Style Sheets), CSS'in yeteneklerini genişleten güçlü bir CSS ön işlemcisidir (preprocessor). Değişkenler, iç içe kurallar, mixin'ler, fonksiyonlar ve modüler yapı gibi özelliklerle CSS yazmayı daha verimli, düzenli ve sürdürülebilir hale getirir. 2006 yılında Hampton Catlin tarafından oluşturulmuş ve Nathan Weizenbaum tarafından geliştirilmiştir.

SCSS (Sassy CSS), Sass'ın CSS ile tamamen uyumlu sözdizimi türüdür. Standart CSS'in üzerine Sass özelliklerini ekler; bu da mevcut CSS dosyalarınızı doğrudan SCSS olarak kullanabileceğiniz anlamına gelir. Modern web projelerinin büyük çoğunluğu SCSS sözdizimini tercih eder.

Sass vs SCSS: Hangisini Kullanmalısınız?

1. Değişkenler (Variables)

SCSS Değişkenleri Nedir?

SCSS değişkenleri, tekrar eden değerleri (renkler, yazı tipleri, boşluklar, breakpoint'ler) tek bir yerde tanımlayıp projenin her yerinde kullanmanızı sağlar. Bir değeri değiştirmek istediğinizde tek bir noktada güncelleme yaparsınız ve tüm projede otomatik olarak yansır.

Değişken Türleri

• Renk değişkenleri: $primary-color: #3498db; $danger-color: #e74c3c;
• Tipografi: $font-family-base: 'Inter', sans-serif; $font-size-lg: 1.25rem;
• Boşluk: $spacing-unit: 8px; $container-max-width: 1200px;
• Breakpoint: $breakpoint-sm: 576px; $breakpoint-md: 768px;
• Z-index: $z-header: 1000; $z-modal: 2000; $z-tooltip: 3000;

Değişken Kapsamı (Scope)

SCSS değişkenlerinin iki kapsam türü vardır:

1. Global kapsam: Dosyanın en üst seviyesinde tanımlanan değişkenler her yerde erişilebilir.
2. Yerel kapsam: Bir kural bloğu içinde tanımlanan değişkenler yalnızca o blok ve alt blokları içinde geçerlidir.

SCSS değişkenleri derleme zamanında (compile-time) değerlendirilir ve CSS custom properties (--variable) ise çalışma zamanında (runtime) değerlendirilir. Dinamik tema değişiklikleri için CSS custom properties, statik değerler için SCSS değişkenleri kullanın.

2. Nesting (İç İçe Yazım)

Nesting Nedir?

Nesting, CSS kurallarını HTML yapısını yansıtacak şekilde iç içe yazmanızı sağlar. Bu, kodun okunabilirliğini artırır ve tekrar eden seçicileri ortadan kaldırır.

Nesting En İyi Uygulamaları

• Maksimum 3-4 seviye derinlik: Aşırı nesting, spesifikliği artırır ve CSS'i kırılgan hale getirir.
• & (parent selector): Üst seçiciye referans vermek için & işaretini kullanın. BEM metodolojisiyle mükemmel uyum sağlar.
• Media query nesting: Responsive kuralları ilgili seçicinin içinde yazarak bağlamı koruyun.
• Pseudo-class ve pseudo-element: &:hover, &::before gibi ifadeler için & kullanımı zorunludur.

Nesting Uyarıları

Aşırı nesting'in yarattığı sorunlar:

1. Yüksek CSS spesifikliği (override zorluğu)
2. Büyük dosya boyutu (uzun seçici zincirleri)
3. Kötü performans (tarayıcı seçici eşleştirmesi sağdan sola çalışır)
4. Bakım zorluğu (derin yapılarda değişiklik yapmak riskli)

3. Mixin'ler

Mixin Nedir?

Mixin'ler, yeniden kullanılabilir CSS kod blokları tanımlamanıza olanak tanır. Parametreli olabilirler, bu da onları son derece esnek kılar. Bir mixin tanımlar ve ihtiyaç duyduğunuz her yerde @include ile çağırırsınız.

Mixin Kullanım Alanları

• Responsive breakpoint'ler: Media query'leri mixin olarak tanımlayarak tutarlılık sağlayın.
• Flexbox/Grid kısayolları: Sık kullanılan layout kalıplarını kapsülleyin.
• Tipografi ayarları: Font-size, line-height, font-weight kombinasyonlarını mixin'leyin.
• Animasyon şablonları: Tekrar eden animasyon kalıplarını parametreli mixin'lerle tanımlayın.
• Tema desteği: Koyu/açık tema değişkenlerini mixin'lerle yönetin.

Mixin vs Extend: Ne Zaman Hangisi?

4. Partial'lar ve Modüler Yapı

Partial Nedir?

Partial'lar, SCSS kodunuzu mantıksal dosyalara ayırmanızı sağlar. Alt çizgi (_) ile başlayan dosyalar partial olarak kabul edilir ve tek başlarına CSS'e derlenmez; yalnızca @use veya @import ile başka dosyalara dahil edilir.

Önerilen Dosya Yapısı

Profesyonel projelerde 7-1 Pattern olarak bilinen dosya organizasyonu yaygın kullanılır:

• abstracts/: Değişkenler, mixin'ler, fonksiyonlar — CSS çıktısı üretmeyen dosyalar
• base/: Reset, tipografi, genel HTML elemanları stili
• components/: Butonlar, kartlar, formlar gibi bağımsız bileşenler
• layout/: Header, footer, sidebar, grid sistemi
• pages/: Sayfaya özel stiller
• themes/: Tema dosyaları (koyu mod, açık mod)
• vendors/: Üçüncü parti kütüphane stilleri
• main.scss: Tüm partial'ları birleştiren ana dosya

@use vs @import

Modern Sass'ta @import kullanımdan kaldırılmaktadır (deprecated). @use ve @forward kullanılması önerilir:

1. @use: Bir modülü yükler ve namespace ile erişim sağlar
2. @forward: Bir modülün üyelerini dışarıya açar
3. Namespace desteği: İsim çakışmalarını önler
4. Özel erişim: Modül üyelerini gizleme imkanı sunar

5. @extend ve Kalıtım

@extend Nedir?

@extend, bir seçicinin başka bir seçicinin tüm stillerini miras almasını sağlar. CSS çıktısında seçiciler birleştirilir, böylece kod tekrarı önlenir.

Placeholder Seçiciler (%)

Placeholder seçiciler, yalnızca @extend ile kullanılmak üzere tasarlanmış seçicilerdir. % işareti ile tanımlanır ve tek başlarına CSS çıktısı üretmez:

• %flex-center gibi tanımlamalar, yalnızca extend edildiğinde CSS'e dahil olur
• Kullanılmayan placeholder'lar dosya boyutunu artırmaz
• Mixin'lerden farklı olarak kodu kopyalamaz, seçicileri gruplar

@extend Dikkat Noktaları

@extend'in media query blokları içinde çalışmadığını unutmayın. Ayrıca derin iç içe yapılarda beklenmedik seçici birleşimleri oluşturabilir. Karmaşık projelerde @mixin kullanımı genellikle daha öngörülebilir sonuçlar verir.

6. Fonksiyonlar

Yerleşik Fonksiyonlar

SCSS, zengin bir yerleşik fonksiyon kütüphanesine sahiptir:

• Renk fonksiyonları: lighten(), darken(), saturate(), desaturate(), mix(), adjust-hue()
• Sayısal fonksiyonlar: percentage(), round(), ceil(), floor(), abs(), min(), max()
• String fonksiyonları: quote(), unquote(), str-length(), str-insert(), to-upper-case()
• Liste fonksiyonları: length(), nth(), append(), join(), index()
• Map fonksiyonları: map-get(), map-merge(), map-keys(), map-values(), map-has-key()

Özel Fonksiyon Yazma

@function direktifi ile kendi fonksiyonlarınızı tanımlayabilirsiniz. Fonksiyonlar, mixin'lerden farklı olarak bir değer döndürür (@return ile) ve CSS özellik değerlerinde kullanılır:

1. px-to-rem gibi birim dönüştürme fonksiyonları
2. Renk paleti oluşturma fonksiyonları
3. Responsive spacing hesaplama fonksiyonları
4. Tipografi ölçek (type scale) fonksiyonları

Sass/SCSS Proje Entegrasyonu

Build Araçları ile Kullanım

SCSS'i projenize entegre etmenin çeşitli yolları vardır:

• Vite: Yerleşik Sass desteği, ek yapılandırma gerektirmez
• Webpack: sass-loader ile entegrasyon
• Gulp: gulp-sass eklentisi ile otomatik derleme
• Next.js: Yerleşik Sass desteği, next.config.js ile özelleştirme
• Angular CLI: Varsayılan olarak SCSS desteği

Performans İpuçları

1. Kullanılmayan mixin ve değişkenleri temizleyin
2. @extend yerine @mixin tercih edin (öngörülebilirlik)
3. Nesting derinliğini 3 seviyede tutun
4. Source map'leri production build'de devre dışı bırakın
5. CSS modülleri ile kapsam izolasyonu sağlayın

Sonuç

Sass/SCSS, modern CSS geliştirmenin vazgeçilmez araçlarından biridir. Değişkenler ile tutarlılık, nesting ile okunabilirlik, mixin'ler ile yeniden kullanılabilirlik, partial'lar ile modülerlik, extend ile DRY prensibi ve fonksiyonlar ile hesaplama gücü kazanırsınız. Bu özelliklerin doğru kombinasyonu, büyük ölçekli projelerde bile sürdürülebilir ve yönetilebilir stil dosyaları oluşturmanın anahtarıdır.