Sass — Operators

Arithmetic operators

$base: 16px;

.font-lg { font-size: $base * 1.5; }   // 24px
.font-sm { font-size: $base / 2; }     // 8px
.margin { margin: $base + 8px; }       // 24px
.padding { padding: $base - 4px; }     // 12px

Division (modern syntax)

@use 'sass:math';

.width {
  width: math.percentage(1 / 3);   // 33.33%
  height: math.percentage(2 / 4);  // 50%
}

Comparison operators

$theme: dark;

.button {
  @if $theme == dark {
    background: #333;
  } @else if $theme != light {
    background: gray;
  }
}

// > < >= <=

Logical operators

$logged-in: true;
$admin: false;

.menu {
  @if $logged-in and $admin {
    content: 'Admin Dashboard';
  } @else if $logged-in or $admin {
    content: 'User Menu';
  } @else {
    content: 'Login';
  }
}

String concatenation

$prefix: 'btn';
$type: 'primary';

.className {
  // Using interpolation
  &.#{$prefix}-#{$type} {
    background: blue;
  }
}

List operations

$list: (a, b, c);
$new: append($list, d);  // (a, b, c, d)
$first: nth($list, 1);   // a
$len: length($list);     // 3

Map operations

$map: (key1: value1, key2: value2);
$merged: merge($map, (key3: value3));

$value: map-get($map, key1); // value1

Math functions for precision

@use 'sass:math';

.result {
  width: math.percentage(7 / 12);   // 58.3333%
  height: math.round(4.6px);        // 5px
  margin: math.ceil(4.2px);         // 5px
  padding: math.floor(4.8px);       // 4px
}

Mini Practice

1. Build a spacing scale using arithmetic
2. Create conditional styles with comparison operators
3. Use string concatenation for dynamic class names
4. Practice list and map operations

Up Next

Continue with Maps — key-value pairs for design tokens.