DEV Community

loading...

Sass Functions

mikkel250 profile image mikkel250 ・2 min read

Functions in Sass

The full list of functions is available in the Sass docs. Only the ones likely to be frequently used will be covered here.
The builtin functions are written in C, and so performance concerns are not a big factor when deciding whether to use them. Functions that are written by us as developers do not necessarily share this trait, so it's something to bear in mind when writing and using your own functions. More on functions:
https://sass-lang.com/documentation/at-rules/function
and the complete list of built-ins:
https://sass-lang.com/documentation/modules

Note that an entire series on just colors could be written, so use Google to find out more about colors if necessary. A good place to start would be https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color

Color functions
Creating color
rgb($red, $green, $blue);
rgba($red, $green, $blue, $alpha);
red($color);
green($color);
blue($color);
mix($color1, $color2, [$weight]);

The above are pretty self-explanatory given the function names and variable names, but research them if needed, to learn more. Some of the more complicated functions are outlined below to get an idea of how functions work.

adjust-hue
adjust-hue(#63f, 60deg)

adjust-hue takes the initial color as as the first argument, and the degrees of rotation (clockwise around the color wheel) as the second (the 'deg' is optional, but helpful for remembering later that this value is degrees on a circle).

darken and lighten
darken($color, $percent);
lighten($color, $percent);

Note that the percent value is not multiplicative. In other words, we are subtracting 20% from its brightness value. We are not decreasing its current brightness value by multiplying the current value by 20% and subtracting the product. It is a scale of 0-100.

saturate and desaturate
desaturate($color, $percent);
saturate($color, $percent);

Color saturation is essentially how much of a channel is mixed into a particular color. A color saturated to 100% is very vivid, whereas a color with 0% saturation would be grey scale.

Discussion (0)

Forem Open with the Forem app