What Is Sass?
Sass stands for Syntactically Awesome Style Sheets. It is a CSS preprocessor that extends CSS with programming-like features, including variables, nesting, mixins, functions, loops, conditional logic, and a module system.
Browsers understand CSS, not Sass-specific syntax. Therefore, Sass source code must be compiled into ordinary CSS before the browser can use it.
For example, a repeated brand color can be stored in a variable and reused throughout a stylesheet. If the brand color changes, updating the variable can update every dependent rule.
Sass supports two principal syntaxes:
- SCSS: Uses braces and semicolons. Existing CSS is generally valid SCSS, making it easier to adopt incrementally.
- Indented Sass: Uses indentation instead of braces and semicolons. It is concise but differs more visibly from conventional CSS.
Modern Sass development generally uses SCSS because it resembles standard CSS and integrates naturally with existing projects.
Sass does not replace CSS knowledge. It generates CSS, so understanding selectors, the cascade, specificity, inheritance, layout, and browser behavior remains essential.
- Full form:
Syntactically Awesome Style Sheets - Primary purpose:
Generate maintainable CSS from enhanced stylesheet source code - Browser support:
Browsers consume the compiled CSS - Recommended syntax:
SCSS
$brand-color: #cc6699;
.button {
background-color: $brand-color;
color: white;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
}$brand-color variable stores a reusable value. Sass replaces the variable reference with its value during compilation.
The generated CSS is equivalent to:
``css
.button {
background-color: #cc6699;
color: white;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
}
``
The browser receives the compiled CSS, not the Sass variable declaration.- Sass extends CSS with reusable and programmable stylesheet features.
- SCSS is the brace-based Sass syntax most developers use.
- Sass must be compiled before its generated styles can be consumed as CSS.
- Sass complements CSS rather than replacing the need to understand it.
Why must SCSS be compiled before a browser can use Sass-specific variables?