Sass 101 - A newb's guide: Color operations

color_operations.md

All arithmetic operations are supported for color values, where they work piecewise. This means that the operation is performed on the red, green, and blue components in turn.

In the following example, ff + 26, 00 + 93, and aa + ff will create the final color of ff93ff

color_operations.scss

SassMeister Gist

color_operations.scss

$background-color: #ff00aa;
$text-color: #2693ff;
$border-color: $background-color + $text-color;

.box {
  color: $text-color;
  background-color: $background-color;
  border: $border-color;
}