SCSS

SCSS (Sassy CSS) is the main syntax of the Sass preprocessor, which extends the CSS language with capabilities familiar from programming languages. SCSS code is not understood directly by browsers — it first goes through a compilation step into plain CSS, which is what actually reaches the user. A key trait of SCSS is full CSS compatibility: every valid CSS stylesheet is also a valid SCSS file.

How SCSS works

SCSS adds mechanisms that plain CSS lacks. The most important are:

• Variables — values such as colours or spacing are declared once (for example $primary: #0d6efd;) and reused in many places;
• Nesting — rules for child elements are written inside the parent's rule, mirroring the HTML structure and shortening the code;
• Mixins — named blocks of declarations that accept arguments and are inserted anywhere with the @include directive;
• Partials and imports — styles are split into modules (@use, @import) and assembled into one stylesheet;
• Functions and operators — calculations such as manipulating colours or doing arithmetic on dimensions.

Compilation is run with tools such as Dart Sass, usually integrated with a bundler (Vite, Webpack) as part of the frontend build.

Practical application

SCSS is the standard in larger frontend projects, where raw CSS becomes hard to maintain. Variables and mixins make it easy to build consistent design systems, light/dark themes or responsive breakpoints. The popular Bootstrap framework ships its source in SCSS, letting you customize colours and sizes by overriding variables rather than fighting rule specificity. A competing preprocessor with similar capabilities is LESS, but the Sass/SCSS ecosystem remains the dominant choice today.