Sass

Medium — good to knowFrontend

ELI5 — The Vibe Check

Sass is CSS with superpowers — variables, nesting, mixins, and functions that vanilla CSS didn't have for years. You write Sass and it compiles down to regular CSS. These days CSS Variables have caught up a lot, but Sass is still popular for large codebases.

Real Talk

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, partials, mixins, functions, and inheritance. It compiles to standard CSS. Sass comes in two syntaxes: the indented Sass syntax and the more popular SCSS (CSS-like) syntax.

Show Me The Code

// Sass variables and nesting
$primary: #3b82f6;
$radius: 8px;

.card {
  border-radius: $radius;
  background: white;

  &:hover {
    background: lighten($primary, 40%);
  }

  .card__title {
    color: $primary;
    font-size: 1.5rem;
  }
}

When You'll Hear This

"The project uses Sass for variables and nesting." / "Sass is less necessary now that CSS has native variables and nesting."

Related Terms

CSS (Cascading Style Sheets)

CSS is the makeup and wardrobe for your HTML skeleton. It decides what color everything is, how big things are, and where stuff goes on the page.

beginnerFrontend

CSS Variables

CSS Variables (officially called Custom Properties) let you store values in CSS and reuse them everywhere.

beginnerFrontend

SCSS

SCSS is the syntax of Sass that looks like regular CSS but with superpowers added.

intermediateFrontend

Tailwind

Tailwind is a CSS framework where instead of writing CSS files you add utility classes directly to your HTML.

beginnerFrontend

Back to Browse Random Term