Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Sass 101 - A newb's guide: Color operations

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

$background-color: #ff00aa;
$text-color: #2693ff;
$border-color: $background-color + $text-color;
.box {
color: $text-color;
background-color: $background-color;
border: $border-color;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment