Sass — Syntax

Variables

Store reusable values with $:

$primary: #3498db;
$font-stack: 'Helvetica', sans-serif;
$spacing: 16px;

body {
  font-family: $font-stack;
  color: $primary;
  padding: $spacing;
}

Compiles to:

body {
  font-family: 'Helvetica', sans-serif;
  color: #3498db;
  padding: 16px;
}

Nesting

Write nested selectors like HTML structure:

nav {
  background: #333;

  ul {
    margin: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    color: white;
    text-decoration: none;

    &:hover {
      color: $primary;
    }
  }
}

The & refers to the parent selector.

Partials and Imports

Split code into files with _ prefix:

// _variables.scss
$primary: #3498db;
$secondary: #2ecc71;

// main.scss
@import 'variables';
@import 'mixins';

Forward declaration

@forward 'variables';
@forward 'mixins' show $breakpoint-map;

Use rule

@use 'variables';
@use 'mixins' as m;

.nav {
  @include m.flex-center;
}

Mixins

Reusable blocks of styles:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin respond($breakpoint) {
  @if $breakpoint == 'tablet' {
    @media (max-width: 768px) { @content; }
  }
}

.container {
  @include flex-center;

  @include respond('tablet') {
    flex-direction: column;
  }
}

Extend

Share styles between selectors:

%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary-btn {
  @extend %button-base;
  background: $primary;
}

.secondary-btn {
  @extend %button-base;
  background: $secondary;
}

Mini Practice

1. Create variables for colors and fonts
2. Nest a navigation menu
3. Build a flex-center mixin
4. Use @use to import variables

Up Next

Continue with Variables — colors, maps, and interpolation.