rgb(
red
,
green
,
blue
)
创建一个 Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示红色，而 G 是 "green" 绿色，B 是 "blue" 蓝色。
实例:
rgb(0, 0, 255);
rgba(
red
,
green
,
blue
,
alpha
)
根据红、绿、蓝和透明度值创建一个颜色。
实例:
rgba(0, 0, 255, 0.3);
hsl(
hue
,
saturation
,
lightness
)
通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。
实例:
hsl(120, 100%, 50%); // 绿色
hsl(120, 100%,
75%); // 浅绿色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%,
70%); // 柔和的绿色
hsla(
hue
,
saturation
,
lightness
,
alpha
)
通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。
实例:
hsl(120, 100%, 50%, 0.3); // 绿色带有透明度
hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度
grayscale(
color
)
将一个颜色变成灰色，相当于 desaturate( color,100%)。
实例:
grayscale(#7fffd4);
结果: #c6c6c6
complement(
color
)
返回一个补充色，相当于adjust-hue($color,180deg)。
实例:
complement(#7fffd4);
结果: #ff7faa
invert(
color
,
weight
)
返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
实例:
invert(white);
结果: black
alpha(
color
)
Returns the alpha channel of
color
as a number between 0 and 1.
实例:
alpha(#7fffd4);
结果: 1
opacity(
color
)
获取颜色透明度值(0-1)。
实例:
opacity(rgba(127, 255, 212, 0.5);
结果:
Sass 颜色操作
描述 & 实例
mix(
color1
,
color2
,
weight
)
把两种颜色混合起来。
weight
参数必须是 0% 到 100%。默认 weight 为 50%，表明新颜色各取 50% color1 和 color2 的色值相加。如果 weight 为 25%，那表明新颜色为 25% color1 和 75% color2 的色值相加。
adjust-hue(
color
,
degrees
)
通过改变一个颜色的色相值（-360deg - 360deg），创建一个新的颜色。
实例:
adjust-hue(#7fffd4, 80deg);
结果: #8080ff
adjust-color(
color
,
red
,
green
,
blue
,
hue
,
saturation
,
lightness
,
alpha
)
这个函数能够调整给定色彩的一个或多个属性值，包括 RGB 和 HSL 色彩的各项色值参数，另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数，通过这些参数再与给定颜色相应的色彩值做加减运算。
实例:
adjust-color(#7fffd4, blue: 25);
结果:
change-color(
color
,
red
,
green
,
blue
,
hue
,
saturation
,
lightness
,
alpha
)
跟上面 adjust-color 类似，只是在该函数中传入的参数将直接替换原来的值，而不做任何的运算。
实例:
change-color(#7fffd4, red: 255);
结果:
#ffffd4
scale-color(
color
,
red
,
green
,
blue
,
saturation
,
lightness
,
alpha
)
另一种实用的颜色调节函数。adjust-color 通过传入的参数简单的与本身的色值参数做加减，有时候可能会导致累加值溢出，当然，函数会把结果控制在有效的阈值内。而 scale-color 函数则避免了这种情况，可以不必担心溢出，让参数在阈值范围内进行有效的调节。
举个例子，一个颜色的亮度 lightness 取值在 0% ~ 100% 之间，假如执行 scale-color($color, $lightness: 40%)，表明该颜色的亮度将有 (100 - 原始值) × 40% 的增幅。
另一个例子，执行 scale-color($color, $lightness: -40%)，表明这个颜色的亮度将减少 (原始值 - 0) × 40% 这么多的值。
所有传参的取值范围都在 0% ~ 100% 之间，并且 RGB 同 HSL 的传参不能冲突。
scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
rgba(
color
,
alpha
)
根据红、绿、蓝和透明度值创建一个颜色。
实例:
rgba(#7fffd4, 30%);
结果:
rgba(127, 255, 212, 0.3)
lighten(
color
,
amount
)
通过改变颜色的亮度值（0% - 100%），让颜色变亮，创建一个新的颜色。
darken(
color
,
amount
)
通过改变颜色的亮度值（0% - 100%），让颜色变暗，创建一个新的颜色。
saturate(
color
,
amount
)
提高传入颜色的色彩饱和度。等同于 adjust-color( color, saturation: amount)
desaturate(
color
,
amount
)
调低一个颜色的饱和度后产生一个新的色值。同样，饱和度的取值区间在 0% ~ 100%。等同于 adjust-color(color, saturation: -amount)
opacify(
color
,
amount
)
降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
fade-in(
color
,
amount
)
降低颜色的透明度，取值在 0-1 之。等价于 adjust-color(color, alpha: amount)
transparentize(
color
,
amount
)
提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
fade-out(
color
,
amount
)
提升颜色的透明度，取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount)
Sass 函数
