SASS
SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends standard CSS with features like variables, nesting, mixins, and functions, compiling down to regular CSS that browsers can run.
Definition
SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends standard CSS with features like variables, nesting, mixins, and functions, compiling down to regular CSS that browsers can run.
Overview
SASS was created in 2006, well before native CSS3 offered variables or nesting, to solve a real pain point: plain CSS had no way to reuse values, share reusable style blocks, or organize large stylesheets without significant repetition. SASS added a superset syntax (and later, a CSS-friendly syntax called SCSS) with variables, nested selectors that mirror HTML structure, mixins for reusable style blocks, functions for calculations, and the ability to split styles across multiple partial files that compile into one output stylesheet. SCSS (Sassy CSS), the more widely used of SASS's two syntaxes, looks like standard CSS with curly braces and semicolons, making it easy for teams to adopt incrementally since valid CSS is also valid SCSS. A build step — via tools like Webpack, Vite, or dedicated SASS compilers — turns `.scss` files into plain `.css` before they reach the browser, since no browser executes SASS syntax natively. As native CSS has caught up with custom properties, nesting, and other long-standing SASS features, some teams have moved away from preprocessors for new projects, but SASS remains extremely common in existing codebases and in projects that still benefit from its more powerful mixins, functions, and control-flow directives (`@if`, `@each`, `@for`) that go beyond what native CSS offers today. It's frequently compared to LESS, a similar but less feature-rich preprocessor, and to build-time tools like PostCSS that take a plugin-based approach instead.
Key Features
- Variables for reusable colors, spacing, and other values
- Nested selectors that mirror HTML structure
- Mixins for reusable, parameterized blocks of styles
- Functions and control-flow directives (@if, @each, @for)
- Partial files that can be split and imported for organization
- Compiles to standard CSS via a build step