Sass also allows us to perform mathematical functions to compute measurements— including colors.

Here is how Sass computes colors:

  1. The operation is performed on the red, green, and blue components.
  2. It computes the answer by operating on every two digits.
$color: #010203 + #040506;

The above would compute piece-wise as follows:

01 + 04 = 05 02 + 05 = 07 03 + 06 = 09

and compile to:

color: #050709;

Sass arithmetic can also compute HSLA and string colors such as red and blue.



Try it. Add red and blue to make the font color of .math purple the following property:

color: red + blue;

Click “Run” to see your changes in the browser and inspect them in the output of main.css.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?