# Functions

Sass includes some built-in modules (sass:color, sass:string, sass:math, ...) which contain useful functions
- All built-in modules start with sass: to indicate that they are part of Sass itself
In this course, we will focus on the sass:color module

# sass:color

The sass:color module (opens new window) contains a lot of functions, of which some useful examples are listed below

function call	description
`color.invert($color)`	returns the negative or inverse of `$color`
`color.complement($color)`	returns the RGB complement of `$color`
`color.grayscale($color)`	returns a gray color with the same lightness as `$color`
`color.adjust($color, $lightness:30%)`	increases the `$lightness` of `$color` by `30%`
`color.scale($color, $lightness:-50%)`	fluidly scales the `$lightness` of `$color` by `-50%`
`color.change($color, $alpha:0.5)`	changes the `$alpha` value of `$color` to `0.5`

REMARK

There is a (subtle) difference between color.adjust(), color.scale() and color:change(). We refer to the official sass:color module documentation (opens new window) for an in-depth explanation.

In order to be able the functions of the sass:color module, it should be loaded (at the top of your Sass code) with the @use rule
Note that color.invert($sasscolor) returns a color. As such, this expression can be used as the first parameter of the color.scale() function.

@use "sass:color";

$sasscolor: #cf649a;

footer {
  color: inherit;
  @debug "inverted color = " + color.invert($sasscolor);
  background-color: color.scale(color.invert($sasscolor), $lightness:70%);
}
 
        Copied!

1
2
3
4
5
6
7
8
9

TIP

Use the @debug rule to print the value of an expression (with filename and line number) to your terminal window
- Note that we use the string operator (opens new window) + to concatenate strings in Sass
Unfortunately, this feature does not (yet) work in CodePen

# Functions

# sass:color

# Example 1B