Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Wiring Sass into the Build: Source Maps, Angular, Vite and ASP.NET Core Settings, Load Paths and Compile Performance
Turn source maps on in development, make them hidden in production and split the .map files off from the release; in Vite, install sass-embedded and put only @use lines that produce no CSS into additionalData. We show a Release build after Debug in Bookstore never running Sass and shipping the map with its Brotli and gzip copies, fix the MSBuild target, check that DevTools finds the .scss line, and try our own build script with the pkg: importer.
Writing Your Own Sass Library: Argument Validation with @debug, @warn and @error, sass:meta, sass:selector and Testing with True
In a Sass library, validate public functions with meta.type-of and raise @error with meta.inspect, announce aging API with @warn, and test functions with True and errors and warnings from JavaScript in Vitest. We move Bookstore's shared Sass code into the @bookstore/styles package, show that Angular's hard-coded quietDeps does not silence @warn, and catch a min-width regression with a 16-test suite.
Responsive Mixins and Generating Utility Classes: a Breakpoint Map, @content(args), a Container Query Mixin and Utilities with @each/@for
Write up, down, between and only mixins that read breakpoints from one map with range syntax; this ends the overlap of max-width and min-width right at the boundary, and the same mixins produce container queries through $container. We add a generator that produces md:-prefixed utilities with @content(args) and a button that looks at the card's width to Bookstore, and measure that making everything responsive multiplies the rule count by 3.6.
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.
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.
Preparing for Dart Sass 2.0: Deprecations, --fatal-deprecation, Slash Division and the End of @import
In Dart Sass 2.0 most deprecations added up to 1.105.0 become errors (slash-div, color functions like darken(), the legacy JS API), while @import, global built-ins and the old if() stay warnings until 3.0. We get those errors today with --fatal-deprecation=dart-sass-2, clean up with sass-migrator, and show that Angular's hard-coded quietDeps hides deprecations in files loaded through includePaths from the build entirely.
Style Architecture in Large Projects: the 7-1 Pattern, BEM, ITCSS and Layered CSS with Cascade Layers
Split a large style code base into CSS-free abstracts and folders that produce CSS, keep names flat with BEM, and move ITCSS's general-to-specific order into the browser with @layer; in Sass, layers are built with meta.load-css(), not @use. We turn Bookstore's style tree into 7-1, put vendor CSS into a layer, and measure how Angular component styles, being unlayered, beat even the longest layered selector.
Theming with Sass: Maps, Generating CSS Custom Properties, Dark Mode and an Angular Material M3 Theme
Keep theme values in a Sass map, validate them and turn them into custom properties with light-dark(); switching themes at runtime means changing only color-scheme or a class on html, because Sass variables never change at runtime. We add a mixin that fails the build on a missing token, a three-state theme button and an Angular Material M3 theme generated from the brand color to Bookstore, measure eight states across two themes, and show why one bundle per theme is not worth it.
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.
Mixins, Functions, @extend and Control Flow: Removing Repetition with @if, @each and @for
Use a mixin when you need parameters, media queries or generated selectors, a placeholder with @extend for rules that really are the same, and @function to compute values; generate repeated rules from data with maps and @each. We add a breakpoint mixin and stock badges to Bookstore, and measure why slash division produces invalid CSS like 12px/2, how @extend breaks inside media queries and what making everything a mixin costs before and after gzip.
Sass Basics: Variables, Nesting, the Parent Selector (&), Interpolation and Placeholders
A Sass variable is a build-time value that disappears after compilation, while a custom property lives at runtime, so when combining them you must pass the value through #{}, or the browser receives the text "$brand". We rewrite Bookstore's card with & and BEM, measure in two engines how Sass nesting produces different specificity from native nesting, and show how deep nesting bloats the output.
Is Sass Still Needed in 2026? Comparison with Native CSS and Setting Up Dart Sass
Yes, but not everywhere it used to be: variables, nesting and color/math are native CSS now, while mixins, loop-generated rules, maps, the module system and compile-time errors are still Sass-only. We measure why raw SCSS leaves not a single rule in the browser, compare sass with sass-embedded, and add Sass to Angular, Vite and ASP.NET Core.