Last updated
What Is SCSS and Why Use It?
SCSS (Sassy CSS) is a superset of CSS — every valid CSS file is also valid SCSS. It adds programming features that make large stylesheets easier to write and maintain: variables, nesting, mixins, functions, and partials. SCSS is compiled to plain CSS before being served to browsers, so there's no runtime overhead.
The main alternative syntax is the indented Sass syntax (no braces or semicolons), but SCSS is far more popular because it's compatible with existing CSS and easier to adopt incrementally.
Key SCSS Features
| Feature | CSS equivalent | SCSS syntax |
|---|---|---|
| Variables | Custom properties (--var) | $primary: #667eea; |
| Nesting | Repeated selectors | .parent { .child { } } |
| Parent selector | Separate rule | &:hover { } |
| Mixins | Copy-paste | @mixin flex-center { } |
| Extend | Duplicate rules | @extend .base-class; |
| Partials | Multiple files | @use 'variables'; |
| Math | calc() | width: $base * 2; |
CSS to SCSS: Nesting Example
.nav { display: flex; }
.nav ul { list-style: none; }
.nav li { padding: 0 16px; }
.nav a { color: #333; text-decoration: none; }
.nav a:hover { color: #667eea; }
.nav a.active { font-weight: bold; }$link-color: #333;
$link-hover: #667eea;
.nav {
display: flex;
ul { list-style: none; }
li { padding: 0 16px; }
a {
color: $link-color;
text-decoration: none;
&:hover { color: $link-hover; }
&.active { font-weight: bold; }
}
}Setting Up SCSS in Your Project
# Install Sass (Dart Sass — the reference implementation)
npm install -D sass
# Compile once
npx sass src/styles.scss dist/styles.css
# Watch mode (recompile on save)
npx sass --watch src/styles.scss dist/styles.css
# In package.json
"scripts": {
"sass": "sass --watch src/scss:dist/css"
}
Vite, webpack, and Parcel all support SCSS out of the box with the sass package installed.
Create React App supports SCSS by renaming .css files to .scss.