SCSS

ELI5 — The Vibe Check

SCSS is the syntax of Sass that looks like regular CSS but with superpowers added. Unlike the original Sass (which uses indentation like Python), SCSS uses curly braces and semicolons — so existing CSS is valid SCSS. It's the one everyone actually uses.

Real Talk

SCSS (Sassy CSS) is the most widely used Sass syntax. It's a strict superset of CSS — any valid CSS is valid SCSS. It adds variables ($ prefix), nesting, mixins (@mixin / @include), partials (@import/@use), functions, and control flow. SCSS files are compiled to plain CSS by tools like Vite, webpack, or Dart Sass.

Show Me The Code

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero {
  @include flex-center;
  min-height: 100vh;

  h1 { font-size: clamp(2rem, 5vw, 4rem); }
}

When You'll Hear This

"We write SCSS and Vite compiles it to CSS at build time." / "SCSS files that start with _ are partials — they don't compile to their own CSS file."