SCSS vs Indented Syntax
Understand the two Sass syntaxes and why SCSS is the popular choice.
.scss uses { } and ; — .sass uses indentationSass offers two syntaxes that do exactly the same thing.
SCSS (.scss)
The Sassy CSS syntax. It is a superset of CSS: every valid CSS file is also valid SCSS. It uses braces { } and semicolons, so it looks just like CSS with extra powers. This is what most projects use.
Indented (.sass)
The original syntax. It drops braces and semicolons, using indentation and newlines instead, similar to Python. It is more concise but less familiar to CSS authors.
| SCSS | Indented (.sass) |
|---|---|
.box { color: red; } | .box |
This tutorial uses SCSS throughout because it is the most common and easiest to learn coming from CSS.
Example
// SCSS syntax (style.scss)
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
// The SAME rules in indented syntax (style.sass):
// nav
// ul
// margin: 0
// padding: 0
// list-style: noneWhen to use it
- A team switching from plain CSS chooses SCSS syntax so their existing .css files can be renamed to .scss and work immediately without reformatting.
- A solo developer coming from a Python background prefers the indented Sass syntax to avoid curly braces and semicolons in their stylesheets.
- A project enforces SCSS because all editors, linters, and CI tools in the stack already support CSS-like syntax highlighting and formatting.
More examples
Same rule in SCSS syntax
SCSS uses curly braces and semicolons, matching ordinary CSS structure so any valid CSS is also valid SCSS.
// SCSS syntax
$primary: #e74c3c;
.alert {
background: $primary;
padding: 1rem;
}Same rule in indented syntax
Indented syntax uses significant whitespace instead of braces and semicolons, resulting in shorter but whitespace-sensitive files.
// Indented (Sass) syntax
$primary: #e74c3c
.alert
background: $primary
padding: 1remNesting comparison in SCSS
SCSS nesting looks identical to regular CSS blocks, making code reviews and onboarding easier for developers new to Sass.
// SCSS
.nav {
ul {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
}
Discussion