Sass Syntax

This lesson covers the foundational syntax rules of SCSS in detail, selectors, declarations, nesting rules, comments, and whitespace handling, so you can read and write any SCSS file confidently before moving into variables, mixins, and functions.

What Are the Core SCSS Syntax Rules?

SCSS syntax looks like ordinary CSS with a few additions: variables prefixed with $, nested selectors, the parent selector &, and directives prefixed with @ (like @mixin, @if, and @use). Everything else, curly braces, colons, semicolons, follows standard CSS conventions.

// A complete example showing common SCSS syntax
$border-radius: 6px;

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

  &__title {
    font-weight: 700;
  }

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

This single block demonstrates a variable, a BEM-style nested element selector, and the parent selector combined with a pseudo-class.

SCSS Statement Types

$variable: value;
selector { property: value; }
@directive { ... }
// line comment
/* block comment */

Variable declarations always start with $ and end with a semicolon.
Rule blocks use a selector followed by curly braces containing declarations.
At-rules (@mixin, @if, @each, @use, and more) start with @ and control logic or imports.
Line comments (//) are stripped from output; block comments (/* */) are preserved unless using the compressed output style.

SCSS Syntax Cheatsheet

Common syntax elements you will type constantly while writing SCSS.

Element	Example	Meaning
Variable	`$gap: 1rem;`	Declares a reusable value
Declaration	`color: red;`	Standard CSS property/value pair
Nested rule	`.nav { a { ... } }`	Compiles to `.nav a { ... }`
Parent selector	`&.active`	References the current selector
Interpolation	`.icon-#{$name}`	Injects a Sass value into a selector
Mixin directive	`@mixin name { ... }`	Defines a reusable block
Include directive	`@include name;`	Applies a mixin
Module directive	`@use 'file' as f;`	Loads another file
Line comment	`// dev-only note`	Removed from compiled CSS

Selectors and Declarations

Just like CSS, a rule pairs a selector with a block of declarations. SCSS allows any valid CSS selector, plus nested selectors and the special parent selector &.

.form-field {
  display: block;
  margin-bottom: 1rem;

  label {
    font-weight: 600;
  }

  input,
  textarea {
    border: 1px solid #cbd5e1;
  }
}

At-Rules Overview

SCSS at-rules extend CSS's own at-rule syntax (@media, @font-face) with Sass-specific directives for logic, reuse, and module loading. You will learn each of these individually in later lessons.

At-Rule	Purpose
`@use` / `@forward`	Load and re-export module files
`@mixin` / `@include`	Define and apply reusable declaration blocks
`@function`	Define a value-returning function
`@if` / `@else`	Conditional logic
`@each` / `@for` / `@while`	Loops over lists, maps, or ranges
`@extend`	Share declarations from one selector with another
`@debug` / `@warn` / `@error`	Print diagnostic messages during compilation

Whitespace and Formatting

SCSS does not require any specific indentation style, whitespace outside of strings is not significant. However, consistent formatting (2-space indentation is the most common convention) makes nested SCSS far easier to read.

Extra blank lines and spacing are ignored by the compiler.
Consistent indentation is a readability convention, not a syntax requirement.
Tools like Prettier can auto-format .scss files for consistency across a team.

Common Mistakes

Forgetting the semicolon after a declaration or variable, a common source of confusing compiler errors.
Using a line comment (//) when the note needs to survive into the compiled CSS.
Confusing SCSS's @ at-rules with CSS's own at-rules; some (like @media) work in both, but most SCSS-specific ones do not exist in plain CSS.
Over-nesting selectors purely because it's possible, leading to overly specific compiled CSS.

Key Takeaways

SCSS syntax builds directly on CSS syntax: selectors, declarations, curly braces, and semicolons.
Variables use a $ prefix; at-rules use a @ prefix for logic, reuse, and module loading.
The parent selector & references the enclosing selector inside a nested rule.
Line comments are removed at compile time; block comments are preserved.

Pro Tip

Set up a .editorconfig and a Prettier configuration with SCSS support enabled, consistent indentation and spacing make nested SCSS dramatically easier to scan during code review.