Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Sass'ı Build'e Bağlamak: Source Map'ler, Angular, Vite ve ASP.NET Core Ayarları, Load Path'ler ve Derleme Performansı
Source map'i geliştirmede aç, production'da hidden yap ve .map dosyasını yayından ayır; Vite'ta sass-embedded kur, additionalData'ya yalnız CSS üretmeyen @use satırı koy. Bookstore'da Debug sonrası Release build'in Sass'ı hiç çalıştırmadığını ve map'i Brotli ve gzip kopyalarıyla yayına gönderdiğini gösteriyor, MSBuild target'ını düzeltiyor, DevTools'un .scss satırını bulduğunu ve pkg: importer'lı kendi build script'imizi deniyoruz.
Kendi Sass Kütüphaneni Yazmak: @debug, @warn, @error ile Argüman Doğrulama, sass:meta, sass:selector ve True ile Test
Bir Sass kütüphanesinde public function'ları meta.type-of ile doğrulayıp meta.inspect'li @error ver, eskiyen API'yi @warn ile duyur ve function'ları True ile, hata ve uyarıları Vitest'te JavaScript'ten test et. Bookstore'un ortak Sass kodunu @bookstore/styles paketine taşıyor, Angular'ın sabit quietDeps ayarının @warn'ı susturmadığını gösteriyor ve 16 testlik bir paketle min-width regresyonunu yakalıyoruz.
Responsive Mixin'ler ve Utility Class Üretmek: Breakpoint Map'i, @content(args), Container Query Mixin'i ve @each/@for ile Utility'ler
Breakpoint'leri tek bir map'ten okuyan up, down, between ve only mixin'lerini range syntax'la yaz; max-width ile min-width'in tam sınırda çakışması böylece biter ve aynı mixin'ler $container ile container query üretir. Bookstore'a @content(args) ile md: önekli utility'ler üreten bir generator ve kart genişliğine bakan bir buton ekliyor, her şeyi responsive üretmenin kural sayısını 3,6 katına çıkardığını ölçüyoruz.
Sass Built-in Module'leri 2: sass:map ve sass:color ile İç İçe Token Map'leri, deep-merge ve Color Space Farkında Renk Türetme
İç içe token map'ini map.merge() ile değil map.deep-merge() ile override et, renk tonlarını HSL'de değil OKLCH'de türet ve sonucu color.to-gamut()'tan geçir; yoksa iç key'ler sessizce kaybolur, aynı adım renkten renge 8 ile 14 puan oynar ve gamut dışı renkleri tarayıcı keser. Bookstore'a OKLCH'de üretilen hover, active ve subtle tonları ile deep-merge'le kurulan bir kurumsal portal teması ekliyoruz.
Sass Built-in Module'leri 1: sass:math, sass:string ve sass:list ile Birim Hesabı, px→rem Function'ı ve List İşlemleri
Sass sayıları birimleriyle taşır: uyumlu birimleri dönüştürür, rem ile px'i karıştırınca hata verir, 1.96.0'dan beri 16px * 2px'i tarayıcının attığı bir calc()'a çevirir; list'ler 1'den sayar. Bookstore'a birimsiz, px ve pt kabul eden bir rem(), 0'dan başlayan ölçeği list'ten okuyan space() ve font-stack() ekliyor, class adlarında escape'i ve unique-id()'nin build'i nasıl deterministik olmaktan çıkardığını gösteriyoruz.
Dart Sass 2.0'a Hazırlık: Deprecation'lar, --fatal-deprecation, Slash Division ve @import'un Sonu
Dart Sass 2.0'da 1.105.0'a kadar gelen deprecation'ların çoğu hataya dönüşüyor (slash-div, darken() gibi renk fonksiyonları, legacy JS API); @import, global built-in'ler ve eski if() 3.0'a kadar uyarı olarak kalıyor. --fatal-deprecation=dart-sass-2 ile bugünden hata alıyor, sass-migrator ile temizliyor ve Angular'ın sabit quietDeps ayarı yüzünden includePaths ile yüklenen dosyalardaki deprecation'ların build'de hiç görünmediğini gösteriyoruz.
Büyük Projede Stil Mimarisi: 7-1 Pattern, BEM, ITCSS ve Cascade Layers ile Katmanlı CSS
Büyük bir stil codebase'i CSS üretmeyen bir abstracts ile CSS üreten klasörlere böl, isimleri BEM ile düz tut ve ITCSS'in genelden özele sırasını @layer ile tarayıcıya taşı; Sass'ta katmanlar @use ile değil meta.load-css() ile kurulur. Bookstore'un stil ağacını 7-1'e çeviriyor, vendor CSS'i katmana alıyor ve Angular component stillerinin katmansız olduğu için en uzun katmanlı selector'ü bile yendiğini ölçüyoruz.
Sass ile Theming: Map'ler, CSS Custom Property Üretmek, Dark Mode ve Angular Material M3 Teması
Tema değerlerini Sass map'inde tutup doğrula ve light-dark() ile custom property'ye çevir; runtime'da tema değiştirmek yalnız color-scheme'ı ya da html'deki bir class'ı değiştirmek demek, Sass değişkeni runtime'da değişmez. Bookstore'a eksik token'da build'i kıran bir mixin, üç durumlu tema butonu ve marka renginden üretilmiş bir Angular Material M3 teması ekliyor, iki temada sekiz durumu ölçüyor ve tema başına ayrı bundle'ın neden değmediğini gösteriyoruz.
Sass Module Sistemi: @use, @forward, Namespace, Private Member ve @import'tan Migration
@use her dosyayı namespace'li ve bir kez yükler, private member'larla public API'yi çizer; @forward ile index dosyası, !default ve with() ile kütüphane konfigürasyonu gelir. @import'un global namespace yüzünden marka rengini nasıl ezdiğini ve CSS'i nasıl iki kez ürettiğini gösteriyor, ağacı sass-migrator ile taşıyor ve Angular'da includePaths ile CSS üretmeyen bir abstracts kuruyoruz; CSS üreten abstracts her component'e kopyalanıyor.
Mixin, Function, @extend ve Control Flow: @if, @each, @for ile Tekrarı Kaldırmak
Parametre, media query ya da selector üretmek gerekiyorsa mixin, gerçekten aynı olan kurallar için placeholder ile @extend, değer hesaplamak için @function kullan; map ve @each ile tekrar eden kuralları veriden üret. Bookstore'a breakpoint mixin'i ve stok badge'leri ekliyor, slash division'ın neden 12px/2 gibi geçersiz CSS ürettiğini, @extend'in media query'de kırıldığını ve her şeyi mixin yapmanın gzip öncesi ve sonrası maliyetini ölçüyoruz.
Sass Temelleri: Variable, Nesting, Parent Selector (&), Interpolation ve Placeholder
Sass değişkeni derleme anında bir değerdir ve derleme bitince yok olur; custom property ise runtime'da yaşar, bu yüzden ikisini birlikte kullanırken değeri #{} ile aktarmak gerekir, yoksa tarayıcıya "$brand" metni gider. Bookstore kartını & ile BEM'e çeviriyor, Sass nesting'inin native nesting'den farklı specificity ürettiğini iki motorda ölçüyor ve derin nesting'in çıktıyı nasıl şişirdiğini gösteriyoruz.
Sass 2026'da Hâlâ Gerekli mi? Native CSS ile Karşılaştırma ve Dart Sass Kurulumu
Evet, ama eskisi kadar her yerde değil: değişken, nesting ve renk/matematik artık native CSS'te var; mixin, döngüyle kural üretme, map'ler, module sistemi ve derleme zamanı hataları ise hâlâ yalnız Sass'ta. Ham SCSS'in tarayıcıda neden tek kural bırakmadığını ölçüyor, sass ile sass-embedded'i karşılaştırıyor ve Sass'ı Angular, Vite ve ASP.NET Core'a ekliyoruz.