Sass and SCSS

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor: a language that extends CSS with features and compiles to ordinary CSS the browser understands. SCSS is the most common Sass syntax. It uses braces and semicolons, so any valid CSS file is already valid SCSS. The older indented syntax uses the .sass extension.

Why it matters

Large stylesheets get repetitive. Sass offers variables, nesting, partial files imported with @use, mixins for reusable blocks and functions for calculations. This keeps colors and spacing in one place and lets teams split styles into modules. Native CSS variables and nesting now cover some of this, but Sass still helps with loops, math and shared libraries.

Example

$brand: #0a66c2;

@mixin pill($bg) {
  background: $bg;
  border-radius: 999px;
}

.tag {
  @include pill($brand);
  &:hover { opacity: .85; }
}

The compiler outputs .tag { background: #0a66c2; border-radius: 999px; } and a separate .tag:hover rule.

Common mistakes

• Nesting selectors many levels deep, producing huge, highly specific CSS.
• Confusing Sass variables, which vanish at compile time, with CSS custom properties, which exist at runtime.
• Using the deprecated @import instead of @use.

Related

• CSS
• CSS variables
• CSS specificity
• Bundler

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.