All articles

Everything on The Sass Way, organised by topic.

Sass & SCSS

The Complete Guide to Sass/SCSS: From Setup to Scalable Stylesheets — Sass is a CSS preprocessor you write in an enhanced syntax with variables, nesting, mixins, and functions, then compile to plain CSS.
Sass Maps Explained: @each Loops and Design Tokens in SCSS — A Sass map is a data structure that stores key-value pairs inside parentheses, like $colors: ("primary": #0d6efd, "danger": #dc3545).
Sass Mixins vs Functions: When to Use Each — Use a Sass mixin when you want to inject a block of CSS declarations into a rule, invoked with @include.
Sass @use vs @import: How to Migrate Off Deprecated Imports — @use is the modern replacement for Sass's deprecated @import rule.
Sass vs SCSS: What's the Difference and Which Should You Use? — Sass and SCSS are two syntaxes for the same preprocessor, both compiled by Dart Sass into identical CSS.
What Is Sass? SCSS Explained for CSS Developers — Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor: you write stylesheets in a more powerful language with variables, nesting, mixins, math,.

CSS Animations Tutorial: Keyframes, Transitions, and Timing — CSS animations come in two forms: transitions and keyframe animations.
CSS Gradients: Linear, Radial, and Conic Explained — A CSS gradient is a smooth blend between two or more colors that the browser paints as an image, usable anywhere an image is valid.
How to Use CSS Custom Properties (Variables) the Right Way — CSS variables, or custom properties, store a reusable value declared with a double-hyphen name like --brand and read with the var() function.

The CSS Box Model: Margin, Border, Padding, and Content — The CSS box model describes every element as four nested layers: content in the center, padding around it, a border around the padding, and margin outside.
CSS Specificity Explained: How the Cascade Decides Which Style Wins — CSS specificity is the scoring system browsers use to decide which rule wins when several target the same element.
CSS Units Explained: px vs em vs rem vs % vs vw — CSS units are either absolute (px, which never changes) or relative (em, rem, %, vw, vh, which scale against a reference).
What Is CSS? A Beginner's Guide to Styling the Web — CSS (Cascading Style Sheets) is the language that controls how a web page looks.

CSS clamp() Explained: Fluid Typography Without Breakpoints — CSS clamp() takes three values — clamp(min, preferred, max) — and returns the preferred value as long as it stays between the minimum and maximum.
CSS Container Queries: Style Components by Their Own Size — CSS container queries style an element based on the size of its parent container rather than the viewport.
CSS Media Queries: How to Make Your Site Responsive — A CSS media query applies styles only when the browser meets a condition, usually viewport width.
Mobile-First CSS: Why It Matters and How to Do It Right — Mobile-first CSS means writing your base styles for the smallest screen first, then using min-width media queries to progressively add complexity as the.
Responsive Web Design: The Complete Guide for 2026 — Responsive web design is the practice of building one website that adapts to any screen size, from small phones to large desktops, instead of maintaining.
Responsive Images in CSS: srcset, sizes, and object-fit — Responsive images in CSS require two jobs working together: the HTML srcset and sizes attributes tell the browser to download an appropriately sized file.

CSS Grid Tutorial: Build a Responsive Layout Step by Step — CSS Grid is a two-dimensional layout system for building rows and columns at once.
A Complete Guide to Flexbox: Every Property, Explained — Flexbox is a one-dimensional CSS layout system for arranging items along a single axis.
Flexbox vs CSS Grid: Which Layout Should You Actually Use? — Use Flexbox for one-dimensional layouts (a single row or column) like navbars, toolbars, and the inside of cards, where content drives the spacing.
How to Center a Div in CSS (5 Ways That Actually Work) — To center a div horizontally and vertically, set its parent to display: flex, then add justify-content: center and align-items: center.

Native CSS Nesting vs Sass Nesting: What Changed and What to Use — Sass nesting is a build-time feature that compiles to flat CSS and glues selectors as text, so `&__title` becomes `.card__title`.
CSS Preprocessors vs PostCSS: Sass, Less, and Tailwind Compared — A CSS preprocessor (Sass, Less, Stylus) is a complete language that compiles to CSS with built-in variables, mixins, and loops.
How to Install and Compile Sass (npm, CLI, and Dart Sass) — Install Sass with npm by running npm install -D sass in your project, which gives you Dart Sass, the official implementation.