Advanced Features

Maps

Maps are key-value collections — ideal for color palettes, breakpoint definitions, and theme configurations. Access values with map.get(), iterate with @each, and merge with map.merge().

Deeply nested maps can represent complete design token systems. A single $theme map drives an entire dark/light theme switch at compile time.

• map.has-key() checks existence before access
• map.keys() and map.values() extract collections
• Nested maps: map.get($theme, 'colors', 'primary')

@use 'sass:map';

$breakpoints: (
  'sm': 640px,
  'md': 768px,
  'lg': 1024px,
  'xl': 1280px,
);

@function breakpoint($name) {
  @return map.get($breakpoints, $name);
}

.sidebar {
  @media (min-width: breakpoint('lg')) {
    width: 280px;
  }
}

Lists

Sass lists hold ordered values — spacing scales, font stacks, and shadow layers. Access items by index (1-based), get length with list.length(), and append with list.append().

Comma-separated lists represent font-family stacks and transition properties. Space-separated lists represent box-shadow layers.

@use 'sass:list';

$font-stack: 'Inter', system-ui, sans-serif;
$shadows: (
  0 1px 2px rgba(0,0,0,0.05),
  0 4px 6px rgba(0,0,0,0.1),
);

.card {
  font-family: $font-stack;
  box-shadow: $shadows;
}

Interpolation

#{} interpolation injects dynamic values into selectors, property names, and at-rules. Combined with loops, it generates entire utility class systems from data.

Interpolation works anywhere in Sass code except inside variable names. Use it to generate BEM modifiers, responsive variants, and state classes programmatically.

$states: hover, focus, active;

@each $state in $states {
  .link:#{$state} {
    color: $color-primary;
    @if $state == focus {
      outline: 2px solid $color-primary;
    }
  }
}

Module System (@use and @forward)

The modern module system replaces @import. @use loads a module once with namespace. @forward re-exports a module API for barrel files. This prevents duplicate CSS and global namespace pollution.

Configure modules with with clauses: @use "theme" with ($primary: #dc2626). This makes modules reusable across projects with different configurations.

• @use must come before any other rules (except @charset)
• Each module loads only once regardless of @use count
• Use as * sparingly — explicit namespaces prevent conflicts

// _theme.scss
$primary: #2563eb !default;

// _index.scss (barrel)
@forward 'theme';
@forward 'mixins';
@forward 'components/button';

// main.scss
@use 'index' as *;

Sass with CSS Custom Properties

Bridge Sass and CSS variables by generating custom properties from Sass maps at compile time. Sass handles the token logic; CSS variables handle runtime theming.

This hybrid approach gives you compile-time validation and runtime flexibility — the best of both systems.

$colors: (
  'primary': #2563eb,
  'surface': #ffffff,
  'text':    #1e293b,
);

:root {
  @each $name, $value in $colors {
    --color-#{$name}: #{$value};
  }
}