Skip to content
Sass

Operators

Use arithmetic, relational, and equality operators in Sass.

#operators#math

Code

sass
$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