SCSS (Sassy CSS)
SCSS is the modern syntax of Sass, the most popular CSS preprocessor. It uses a superset of CSS syntax (curly braces and semicolons) with variables, nesting, mixins, functions, and modules. SCSS is used by Bootstrap 5, Tailwind build tools, and enterprise design systems.
MIME Type
text/x-scss
Type
Text
Compression
Lossless
Advantages
- + CSS-compatible syntax — any CSS is valid SCSS
- + Powerful module system (@use, @forward) for large projects
- + Rich built-in functions for colors, math, and lists
- + Industry standard in enterprise design systems
Disadvantages
- − Requires a compilation step (Dart Sass or build tool)
- − Native CSS custom properties and nesting reduce the need for SCSS
- − Large projects can have complex dependency graphs
When to Use .SCSS
Use SCSS for complex stylesheets, design systems, and any project benefiting from variables, mixins, and modular CSS architecture.
Technical Details
SCSS files compile to CSS via Dart Sass (the reference implementation). Features include $variables, @mixin/@include, nesting, @extend, @use/@forward modules, and built-in functions for color, math, and strings.
History
Hampton Catlin created Sass in 2006 with an indentation-based syntax. SCSS (Sassy CSS) was introduced in Sass 3.0 (2010) with CSS-compatible syntax, and it quickly became the dominant Sass style.