Sass/SCSS

Sass is a CSS preprocessor that adds programming conveniences — variables, nesting, mixins, functions, and modules — then compiles to plain CSS. Its SCSS syntax is a superset of CSS, so any valid CSS is valid SCSS, which makes adoption gradual.

Sass shaped modern CSS so thoroughly that the language has since adopted custom properties and native nesting. It still earns its place for mixins, loops, and module organization in larger codebases — just with a smaller gap than a decade ago.

TL;DR

• Sass adds variables, nesting, mixins/functions, and modules to CSS.
• Nest shallowly to avoid runaway specificity.
• Use @use (not the deprecated @import) for modules.
• Native CSS now covers variables and nesting — reach for Sass for logic and structure.

Quick Example

Variables, a mixin, and shallow nesting compiling to plain CSS:

Core Concepts

• Variables — $brand, $space-4 for colors, spacing, breakpoints.
• Nesting — write child selectors inside parents (keep it shallow).
• Mixins & functions — reusable blocks (@include) and computed values.
• Modules — split styles into partials and compose with @use, which namespaces and avoids duplicate output.

Best Practices

• Keep nesting 1–2 levels deep — deep nesting produces over-specific selectors that are hard to override.
• Prefer @use over @import — @import is deprecated in Dart Sass and leaks globals.
• Organize by feature/component, not one giant global stylesheet.
• Reuse via mixins, but watch for duplicated output when mixins emit large blocks repeatedly.

Comparison: Sass vs native CSS

For dynamic, runtime theming, native custom properties win. For build-time logic and structure, Sass still leads. See CSS Fundamentals.

Common Mistakes

Deep nesting → specificity wars

Still using @import

FAQ

Do I still need Sass now that CSS has variables and nesting?

Less than before, but yes for many teams. Native CSS covers custom properties and nesting, but Sass still offers mixins, functions, loops, and @use modules that plain CSS can't. For simple projects, native CSS may be all you need.

What's the difference between .sass and .scss?

They're two syntaxes for the same language. SCSS uses braces and semicolons (a superset of CSS), while the indented .sass syntax omits them. SCSS is far more common because it's CSS-compatible.

@use or @import?

@use. The old @import is deprecated in Dart Sass — it re-includes files and pollutes the global namespace. @use loads a module once and namespaces its members.

Sass or Tailwind or CSS-in-JS?

Sass if you like writing structured CSS in stylesheets. Tailwind for utility-first speed and a built-in design system. CSS-in-JS for component-scoped, dynamic styles. They solve overlapping problems differently — pick one per project.

Related Topics

• CSS Fundamentals — What Sass compiles to
• Tailwind CSS — Utility-first alternative
• CSS-in-JS — Styling in JavaScript
• Frontend Development — The broader landscape

References

• Sass — Official documentation
• Sass — @use rule
• MDN — Using CSS custom properties
• MDN — CSS nesting