Sass Syntax

Sass Syntax

Sass: Basic Syntax

Sass 22,539 has two syntaxes. SCSS (.scss), used in this book, is a superset of CSS: any valid stylesheet is valid SCSS. The older indented syntax (.sass) drops braces and semicolons. A file whose name starts with an underscore (_tokens.scss) is a partial: other files load it, and it is never compiled on its own.

card.scss: comments, variables, interpolation, nesting, & and mathSass

@use "sass:math";
// Silent comment: never reaches the CSS
$gap: 1rem;
$block: card;
.#{$block} {
  width: math.div(100%, 3);
  padding: $gap * 1.5 $gap;
  &__title { margin-top: -$gap; }
}

Compiled CSS: npx sass card.scssSass

.card {
  width: 33.3333333333%;
  padding: 1.5rem 1rem;
}
.card__title {
  margin-top: -1rem;
}

Comments: // comments vanish; /* */ comments stay in expanded output.
Variables hold numbers, strings, colors, booleans, null, lists (1px 2px) and maps ((sm: 576px)). They are block-scoped unless marked !global; $x: 5px !default assigns only if $x is unset.
Interpolation #{...} inserts values into selectors, property names and custom properties.
The parent selector & is pasted in as text, so unlike native nesting (CSS Nesting) it can build BEM names such as &__title; .dark & yields .dark .card.
Operations track units: 24px / 16px is 1.5, while 1rem + 2px fails with incompatible units (write calc(1rem + 2px) instead).

MENU