Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
The Sass Module System: @use, @forward, Namespaces, Private Members and Migrating from @import
@use loads each file once and namespaced, and private members draw the public API; @forward gives you an index file, !default and with() configure libraries. We show how @import's global namespace overwrote the brand color and emitted CSS twice, migrate the tree with sass-migrator, and set up CSS-free abstracts in Angular with includePaths; abstracts that emit CSS get copied into every component.
Sass Built-in Modules 1: Unit Math, a px-to-rem Function and List Operations with sass:math, sass:string and sass:list
Sass carries numbers with their units: it converts compatible units, fails when you mix rem and px, and since 1.96.0 turns 16px * 2px into a calc() that the browser drops; lists count from 1. We add to Bookstore a rem() that accepts unitless, px and pt values, a space() that reads a 0-based scale from a list, and font-stack(), and show escaping in class names and how unique-id() makes builds non-deterministic.
Sass Built-in Modules 2: Nested Token Maps, deep-merge and Color-Space-Aware Color Derivation with sass:map and sass:color
Override a nested token map with map.deep-merge(), not map.merge(), derive color tones in OKLCH instead of HSL and pass the result through color.to-gamut(); otherwise inner keys silently disappear, the same step varies by 8 to 14 points between colors, and the browser cuts out-of-gamut colors. We add OKLCH-derived hover, active and subtle tones and an institutional portal theme built with deep-merge to Bookstore.