@function color()
aliased as cl()
Parameters & Return
$key: (color)
A key from colors
map that exists in _sin.config.scss
$brightness: 0 (color)
If it is a negative value, it will apply sass darken()
, if it is a positive value, it will apply sass lighten()
. If it is zero, it will render the normal color
$step: 4 (color)
How prominent the effect will be
@return (color)
Returns a CSS color from _sin.config.scss
, and can brighten or darken a color.
@error
Color function needs a valid input. It requires a color key from _sin.config.scss
. The current value is: #{$key}
. See bellow for available colors
Examples
scss
color()
.sin{
color: color(test-color, 3);
}
css
compiled
.sin {
color: #ffb01f;
}
scss
You use color function in places like rgba
.sin{
color: rgba(color(test-color), .4);
}
css
compiled
.sin {
color: rgba(255, 165, 0, 0.4);
}