Modules, Control Flow & Maps

@use & @forward

// _colors.scss
$primary: #3498db;
$secondary: gray;

// _buttons.scss
@use 'colors';
.btn { background: colors.$primary; }  // namespaced — avoids collisions with
                                        // another partial's own $primary variable

// _index.scss — forward several partials through one entry point
@forward 'colors';
@forward 'buttons';

// main.scss
@use 'index' as styles;
// styles.$primary now available — one @use instead of many

// @use loads each file's code only ONCE per compilation, unlike @import
// which could re-process the same partial multiple times if several
// files each imported it (a common source of duplicated output/bugs).

Control Flow

@mixin theme($name) {
  @if $name == dark {
    background: black;
    color: white;
  } @else if $name == light {
    background: white;
    color: black;
  } @else {
    @warn "Unknown theme: #{$name}";
  }
}

// @each — generate a class per item
$sizes: small, medium, large;
@each $size in $sizes {
  .text-#{$size} { font-size: map-get((small: 12px, medium: 16px, large: 24px), $size); }
}

// @for — generate a numbered scale
@for $i from 1 through 5 {
  .m-#{$i} { margin: $i * 4px; }
}

Maps & Design Tokens

@use 'sass:map';

$spacing: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 32px,
);

@each $key, $value in $spacing {
  .p-#{$key} { padding: $value; }
  .m-#{$key} { margin: $value; }
}
// One source of truth for the whole spacing scale — adding a new key
// to $spacing automatically generates the matching utility classes.

Math & Compiling

@use 'sass:math';

.column {
  // plain `/` division is deprecated — ambiguous with CSS shorthand like
  // `font: 16px/1.5` — use math.div() to be explicit that this is math
  width: math.div(100%, 3);
}

sass input.scss output.css
sass --watch styles/:dist/    # recompile a whole folder on change
sass --style compressed input.scss output.min.css