SCSS

SCSS, short for Sassy CSS, is a CSS preprocessor language designed to extend CSS with features that help manage complex stylesheets. It is a syntax of Sass and, unlike the original indented Sass syntax, SCSS uses braces and semicolons and is a superset of CSS, so any valid CSS stylesheet is also valid SCSS.

SCSS adds variables, nesting, mixins, and inheritance, as well as modules, functions, and control directives. Variables allow reuse of values such as colors and font stacks. Nesting mirrors HTML structure, though it compiles to flat CSS rules. Mixins group reusable declarations and can accept parameters; @include uses them. @extend enables inheritance of selectors. The language supports maps, lists, operators, and built in functions, with additional functions provided by libraries.

Recent Sass versions introduced a module system with @use and @forward to organize styles across files, replacing older @import. Partials—files named with a leading underscore—are intended for modular composition.

SCSS files typically compile to standard CSS via a Sass compiler. Implementations include Dart Sass (the reference implementation), and previously LibSass; integration is common in build systems such as Webpack, Gulp, Grunt, and Parcel, and it is used by frameworks like Bootstrap.

Because SCSS compiles to CSS, it remains compatible with existing tooling and browsers, while offering developer productivity improvements for large-scale stylesheets.