Operators

Code

$base: 16px;

.container {
  width: 100% - 20%;          // 80%
  padding: $base * 2;         // 32px
  margin: ($base / 2);        // 8px (division needs parens)
  font-size: $base + 2px;     // 18px
}

// Relational and equality operators in conditions
$mode: dark;
$width: 800px;

@if $mode == dark and $width > 600px {
  .box { background: #333; }
}

// Color arithmetic
$color: #3498db;
.lighter { background: $color + #111; }   // lighten via math

Explanation

Sass supports arithmetic (+ - * / %), relational (< > <= >=), and equality (== !=) operators, plus and/or/not for booleans. Division now needs parentheses or the math.div function to disambiguate from CSS. Operators enable calculations and conditional logic directly in stylesheets.

More Sass Snippets