Sass/SCSS — Complete Guide

What Is Sass? — CSS Preprocessor Overview

Sass is a CSS preprocessor that extends CSS with variables, nesting, mixins, and functions for writing more maintainable and DRY stylesheets.

Installing Sass — CLI, npm, and Build Tools

Install Sass using npm, the standalone CLI, or integrate it with build tools like Vite, Webpack, and Gulp for automated compilation.

SCSS vs Sass — Syntax Differences and When to Use Each

SCSS uses CSS-like syntax with braces and semicolons. Sass uses indentation. SCSS is more popular for its compatibility with existing CSS.

Sass Variables — Storing Reusable Values

Sass variables store values like colors, fonts, and sizes using dollar sign syntax, enabling single-point-of-change for design tokens.

Sass Data Types — Numbers, Strings, Colors, Lists, Maps

Sass supports seven data types: numbers, strings, colors, booleans, null, lists, and maps for use in variables, functions, and mixins.

Sass Nesting — Writing Clean Nested Selectors

Sass nesting allows writing CSS selectors inside parent selectors, mirroring HTML structure and reducing repetition for cleaner stylesheets.

Sass Parent Selector — The & Reference

The Sass parent selector & references the outer selector, enabling pseudo-classes, compound selectors, BEM naming, and selector concatenation.

Sass Partials & Import — Modular File Organization

Sass partials split stylesheets into modular files prefixed with underscore, imported via @import to organize code without generating extra CSS files.

Sass Modules — @use and @forward for Namespaced Imports

Sass modules with @use and @forward enable namespaced imports, private members, and module organization, replacing the deprecated @import.

Sass Mixins Basics — Reusable Style Blocks with @mixin

Sass mixins define reusable style blocks with @mixin directive and apply them with @include, reducing code duplication across stylesheets.

Sass Mixin Arguments — Parameters, Defaults, and Keyword Args

Sass mixin arguments allow parameterized reusable styles with default values, keyword arguments, variable-length arguments, and argument lists.

Sass Mixin Content — Passing Style Blocks with @content

Sass @content directive in mixins accepts passed style blocks, enabling wrapper patterns like media queries, theme variants, and state conditions.

Sass Functions — Creating Custom Functions with @function

Sass custom functions use @function directive to compute and return values, enabling reusable calculations and transformations in stylesheets.

Sass Built-in Functions — Standard Library Overview

Sass built-in functions provide color manipulation, math operations, list and map handling, string utilities, and selector functions.

Sass Color Functions — Manipulating and Generating Colors

Sass color functions adjust hue, saturation, lightness, and alpha channels for generating color palettes, hover states, and accessible color variations.

Sass Math Functions — Calculations and Number Operations

Sass math functions provide number operations with unit handling: division, rounding, trigonometry, exponentiation, and comparison functions.

Sass List Functions — Manipulating Lists and Arrays

Sass list functions from sass:list module provide operations for accessing, modifying, joining, and splitting lists of values.

Sass Map Functions — Key-Value Data Structures

Sass map functions from sass:map provide key-value storage for configuration data, theme settings, and lookups with get, merge, keys, and values.

Sass @extend and Inheritance — Reusing Selector Rules

Extend in Sass lets a selector inherit styles from another selector, reducing repetition in compiled CSS by grouping selectors together.

Sass Placeholder Selectors — Silent Extend-Only Classes

Sass placeholder selectors use % prefix to define extend-only classes that do not appear in compiled CSS unless extended by another selector.

Sass Control Directives — @if, @else, and Conditional Logic

Sass control directives use @if, @else if, and @else for conditional styles, enabling theme-based, breakpoint-based, and configuration-driven CSS generation.

Sass Error Handling — @error, @warn, and @debug Directives

Sass error handling directives (@error @warn @debug) help you validate inputs, debug output, and provide feedback during stylesheet compilation.

Sass Interpolation — Dynamic Selectors and Property Names

Sass interpolation #{} embeds expressions in selectors, property names, strings, and values for dynamic CSS generation.

Sass Best Practices — Writing Maintainable Stylesheets

Sass best practices include consistent naming conventions, proper nesting depth, mixin vs extend decisions, and file organization for scalable CSS.

Sass Project — Build a Complete Themed Stylesheet

Build a complete themed stylesheet using Sass with variables, mixins, functions, loops, 7-1 architecture, and component-based design system.