---
title: "SCSS"
description: "SCSS is the modern Sass preprocessor syntax that extends CSS with variables, nesting and mixins. Learn how it differs from CSS and how compilation works."
url: "https://nodea.io/en/glossary/scss"
lang: "en"
updated: "2026-07-13"
---

# SCSS

> SCSS is the main, CSS-compatible syntax of the Sass preprocessor that extends stylesheets with variables, nested rules, mixins and functions, then compiles the code down to plain CSS.

**SCSS** (Sassy CSS) is the main syntax of the **Sass** preprocessor, which extends the [CSS](https://nodea.io/en/glossary/css) language with capabilities familiar from programming languages. SCSS code is not understood directly by browsers — it first goes through a [compilation](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/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](https://nodea.io/en/glossary/less), but the Sass/SCSS ecosystem remains the dominant choice today.

### What is the difference between SCSS and Sass?

Sass is the preprocessor, and SCSS is one of its two syntaxes. SCSS (the .scss extension) is fully CSS-compatible and uses braces and semicolons. The older Sass syntax (.sass) relies on indentation and omits braces. Both compile to the same CSS, but SCSS is by far the more popular choice today.

## Related

- [CSS (Cascading Style Sheets)](https://nodea.io/en/glossary/css)
- [LESS](https://nodea.io/en/glossary/less)
- [Compilation](https://nodea.io/en/glossary/compilation)
- [Frontend](https://nodea.io/en/glossary/frontend)
- [Bootstrap](https://nodea.io/en/glossary/bootstrap)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/scss.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)