Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
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.
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.
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.