Functions & Operators

Sass can do real math on your values and comes with a set of built-in functions for working with color — both let you derive a new value from an existing one instead of hardcoding a second hex code or number by hand.

Color functions

lighten() and darken() adjust a color's lightness by a percentage, which is a common way to generate a hover state directly from a base color:

$brand-blue: #1b6ec2;

.btn {
  background: $brand-blue;
  border: 1px solid darken($brand-blue, 15%);

  &:hover {
    background: lighten($brand-blue, 10%);
  }
}

.btn {
  background: #1b6ec2;
  border: 1px solid #144e8a;
}
.btn:hover {
  background: #4791d6;
}

Both functions take the original color and shift it toward white or black by the given percentage — no second color needs to be picked and maintained by hand, and it automatically stays related to the base color if that ever changes.

Math operators

Sass supports the arithmetic you'd expect — +, -, and * work directly on numeric values, including ones with units:

$base-spacing: 8px;

.stack > * + * {
  margin-top: $base-spacing * 3;
}

.card {
  padding: $base-spacing + 4px;
}

.stack > * + * {
  margin-top: 24px;
}
.card {
  padding: 12px;
}

Division: sass:math

Division looks like it should just be a plain /, but CSS itself already uses / for other things — separating values in the font shorthand, for example — so modern Sass no longer treats a bare / as division in most contexts. Instead, load the built-in math module and call math.div():

@use 'sass:math';

$container-width: 960px;
$columns: 4;

.column {
  width: math.div($container-width, $columns);
}

.column {
  width: 240px;
}