SASS provides many built-in modules that contain various useful functions and some mixins that makes it easy to use. All built-in modules begin with sass: to show that they are different from other modules and a part of SASS itself. One of the built-in modules is the sass:color module. This module is used in order to create new colors from the existing ones. This module has a list of functions that can be used directly while coding with sass:
- color.adjust(): This function increases or decreases different properties of the color by some fixed amount.
Syntax:
color.adjust($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$alpha: null)
adjust-color(...)
|
The function adds values passed for every keyword argument to the corresponding property of the color, and returns the adjusted color. It throws an error when an RGB property and the HSL property are specified at the same time. Every optional argument must be a number. The RGB arguments must be unitless and between -255 and 255 (both inclusive). The hue
argument must either have deg
as unit or no unit. The saturation
and lightness
arguments must always be between -100% and 100% (both inclusive), and can be unitless. The alpha
argument must be unitless and between -1 and 1 (both inclusive).
Example:
@debug color.adjust( #2cb890 , $green: 20 );
@debug color.adjust( #35785f , $red: -20 , $blue: 30 );
@debug color.adjust( #21787d ,
$lightness: -20% , $alpha: -0.5 );
|
Output:
#2ccc91
#21787d
rgba(12, 43, 44, 0.5)
- adjust-hue(): This function increases or decreases the color’s hue value.
Syntax:
adjust-hue($color, $degrees)
|
The hue value must always be a number between -360deg and 360deg (both inclusive) to add it to the color’s hue. It may be unitless.
Example:
@debug adjust-hue( #0c2b2c , -50 deg);
|
Output:
#0c2c12
- color.alpha(): This function returns the alpha channel of a color as a number between 0 and 1.
Syntax:
color.alpha($color)
alpha($color)
opacity($color)
|
Example:
@debug color.alpha( #e1d7d2 );
@debug color.opacity( rgb ( 210 , 225 , 221 , 0.4 ));
@debug alpha(opacity= 20 );
|
Output:
1
0.4
alpha(opacity=20)
- color.change(): This function sets one or more properties of a color to new color values.
Syntax:
color.change($color,
$red: null, $green: null, $blue: null,
$hue: null, $saturation: null, $lightness: null,
$alpha: null)
change-color(...)
|
The function uses value passed for every keyword argument to the corresponding property of the color, and then returns the changed color. It throws an error when an RGB property and the HSL property are specified at the same time. Every optional argument must be a number. The RGB arguments must be unitless and between -255 and 255 (both inclusive). The hue
argument must either have deg
as unit or no unit. The saturation
and lightness
arguments must always be between -100% and 100% (both inclusive), and can be unitless. The alpha
argument must be unitless and between -1 and 1 (both inclusive).
Example:
@debug color.change( #6b717f , $red: 100 );
@debug color.change( #d2e1dd , $red: 100 , $blue: 50 );
@debug color.change( #998099 , $lightness: 30% , $alpha: 0.5 );
|
Output:
#64717f
#64e132
rgba(85, 68, 85, 0.5)
- color.complement(): This function returns the RGB complement of the color. It is identical to
color.adjust($color, $hue: 180deg)
.
Syntax:
color.complement($color)
complement($color)
|
Example:
@debug color.complement( #6b717f );
@debug color.complement( #d2e1dd );
@debug color.complement( #036 );
|
Output:
#7f796b
#e1d2d6
#663300
- desaturate(): This function makes the color less saturated by the given amount.
Syntax:
desaturate($color, $amount)
|
The amount must always be a number between 0% and 100% (both inclusive). The function decreases the HSL saturation of the color by that amount.
Example:
@debug desaturate( #036 , 20% );
@debug desaturate( #f2ece4 , 20% );
|
Output:
#0a335c
#eeebe8
Last Updated :
16 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...