Sass/SCSS at a Glance

What Sass adds

Sass/SCSS is a superset of CSS that adds variables ($name), nested rules, mixins (reusable blocks), and math — then compiles down to plain CSS the browser understands.

Variables & nesting

Nesting mirrors your HTML structure instead of repeating parent selectors.

$brand-color: #264de4;

.card {
  border: 1px solid #ddd;

  .title {
    color: $brand-color;
    font-weight: bold;
  }
}

Mixins

A @mixin bundles reusable declarations; @include inserts them, with arguments.

@mixin flex-center($gap: 8px) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $gap;
}

.toolbar {
  @include flex-center(12px);
}

It's still just CSS in the end

Sass needs a build step (via a bundler or the sass CLI) to compile .scss into .css — browsers can't read Sass directly.