color()
The function color()
returns the hsla() color from the four CSS variables of the given $name
. The $name
parameter can be passed as two-index list, where the second item is the $lightness
, or can be passed as three-index list, where the third item is the $alpha
.
The function color()
returns the hsla()
color from a CSS variables of the given $name
.
Parameters
$name
$name
A color name that exists as a CSS variable of a string or two/three-index list type is passed to the color()
function to set the CSS variable's color name.
If name is passed as two-index list the first item refers to the CSS variable color name, the second refers to $lightness
, and the third of the three-index list item refers to its $alpha
.
$hue: 0deg
$hue: 0deg
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. By default, it's set to 0deg
.
$saturation: 0%
$saturation: 0%
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. By default, it's set to 0%
.
$lightness: 0%
$lightness: 0%
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
$alpha: 1
$alpha: 1
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
$prefix: $var-prefix
$prefix: $var-prefix
The name's prefix of the four CSS variables, by default it's set to $var-prefix
.
Example usage
Source
Source of definitions hex, saturation, lightness, and alpha.
Last updated