Sass Basics

What Is Sass?

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that adds programming features to stylesheets. It compiles to standard CSS that browsers understand. Sass comes in two syntaxes: SCSS (Sassy CSS, using braces) and the indented Sass syntax.

SCSS is a superset of CSS — any valid CSS is valid SCSS. This makes adoption gradual: rename .css to .scss and start adding features incrementally.

• SCSS uses // for single-line comments (stripped from output)
• Sass compiles at build time — no runtime overhead
• Install via npm: npm install -D sass

// styles/main.scss
$primary: #2563eb;
$radius: 8px;

.button {
  background: $primary;
  border-radius: $radius;
  padding: 0.75rem 1.5rem;
}

Variables

Sass variables store reusable values — colors, spacing, breakpoints, and font stacks. Define them with $ and reference throughout your stylesheet. Unlike CSS custom properties, Sass variables are compile-time only and do not exist in the browser.

Use descriptive names and organize variables in a dedicated _variables.scss partial. Group by category: colors, typography, spacing, breakpoints.

// _variables.scss
$color-primary: #2563eb;
$color-text: #1e293b;
$space-unit: 0.25rem;
$font-stack: system-ui, sans-serif;

.card {
  color: $color-text;
  padding: $space-unit * 4;
  font-family: $font-stack;
}

Nesting

Nesting mirrors HTML structure in CSS, reducing repetition. Nest selectors inside parent blocks to scope styles. Nest properties with & for parent reference — essential for pseudo-classes, modifiers, and BEM naming.

Avoid nesting more than three levels deep. Deep nesting creates overly specific selectors that are hard to override and bloat the compiled output.

• Use & for pseudo-classes: &:hover, &:focus-visible
• BEM naming maps naturally: &__element, &--modifier
• The parent selector & can suffix: .sidebar & { }

.nav {
  display: flex;
  gap: 1rem;

  &__link {
    color: $color-text;
    text-decoration: none;

    &:hover { color: $color-primary; }
    &--active { font-weight: 700; }
  }
}

Partials and Imports

Partials are Sass files prefixed with underscore (_partial.scss) that are not compiled individually. Use @use or @forward (modern) or @import (legacy) to include them in a main stylesheet.

Prefer @use over @import — it creates module scope, prevents duplicate output, and makes dependencies explicit. Each partial should @use only what it needs.

// _buttons.scss
@use 'variables' as vars;

.button {
  background: vars.$color-primary;
  border-radius: vars.$radius;
}

// main.scss
@use 'variables';
@use 'buttons';

Compilation Workflow

Compile Sass with the CLI: sass styles/main.scss dist/main.css. Use --watch for development and --style=compressed for production. Most projects integrate Sass through bundlers like Vite, webpack, or Next.js which handle compilation automatically.

Source maps connect compiled CSS back to Sass files in DevTools. Enable them in development for easier debugging.

# One-time compile
sass styles/main.scss dist/main.css

# Watch mode with source maps
sass --watch styles:dist --source-map

# Production build
sass styles/main.scss dist/main.css --style=compressed --no-source-map