RGB Functions
rgb
颜色只是颜色中的一种表达方式,其中R
是“red
"表示红色,而G
是“green
”绿色,B
是“blue
”蓝色。
rgb($red, $green, $blue)
rgb($red, $green, $blue)
:通过红、绿、蓝的值创建颜色。
其中,$red、$green、$blue必须是0~255或0%~100%的值。
rgba($red, $green, $blue, $alpha)
rgba($red, $green, $blue, $alpha)
:通过红、绿、蓝及透明度的值创建颜色。
rgba($color, $alpha)
:对一个存在的颜色设置透明度
rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)
red($color)
red($color)
:取得指定颜色的的红色成分,必要时通过[algorithm]从HSL计算。
green($color)
green($color)
: 取得指定颜色的的红色成分,必要时通过[algorithm]从HSL计算。
blue($color)
blue($color)
: 取得指定颜色的的红色成分,必要时通过[algorithm]从HSL计算。
mix($color1, $color2, [$weight])
mix($color1, $color2, [$weight])
:根据权重合并两个颜色为一个颜色。前两个颜色参数可以是颜色变量、十六进制、RGBA、RGB、HSL或者HSLA。
具体来说是取各自RGB值然后根据权重比加权,当然透过度也是一样加权的。指定的权重在0~1
之间,默认50%
,即两种颜色各自一半相加,例如25%
,表示第一种颜色的四分之一与第二种颜色的四分之三。
mix(#f00, #00f) => #7f007f
mix(#f00, #00f, 25%) => #3f00bf
mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)
mix(#A, #B, 25%)
新颜色红色R的值的过程是:(#A.R *25% + #B.R *75%) / 2
。通过这样的算法,分别算出G、B以及A。
HSL Functions
HSL
”所表示的是“H:色相”,“S:饱和度”,“L:亮度”。色相是在色盘上的颜色(见下图),颜色的选择是使用饱和度:“0度是红色”,“120度为绿色”和“240度为蓝色”。
hsl($hue, $saturation, $lightness)
hsl($hue, $saturation, $lightness)
:通过色相、饱和度、明度设置一个颜色。
$hue
颜色的色调,包含0~360度的值。
$saturation
颜色的饱和度,包含0%~100%度的值。
$lightness
颜色的明度,包含0%~100%度的值。
hsla($hue, $saturation, $lightness, $alpha)
hsla($hue, $saturation, $lightness, $alpha)
跟hsla($hue, $saturation, $lightness)
一样,只是颜色增加了一个透明度的设置
$alpha
颜色的透明度,包含0~1的值。
hue($color)
hue($color)
取得一个颜色的和相值。
saturation($color)
saturation($color)
: 取得一个颜色的饱和度。
lightness($color)
lightness($color)
: 取得一个颜色的明度。
adjust-hue($color, $degrees)
adjust-hue($color, $degrees)
: 修改给定颜色的色相值。
使用-360deg
到 360deg
之间的角度,然后返架指定颜色hue
旋转这个角度后有颜色(正:顺时针方向,负:逆时针方向)。
adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%)
adjust-hue(hsl(120, 30%, 90%), -60deg) => hsl(60, 30%, 90%)
adjust-hue(#811, 45deg) => #886a11
lighten($color, $amount)
ighten($color, $amount)
: 使一个颜色更亮。
$color
任意的颜色,RGB、HSL等等
$amount
:包含0%
~100%
的值。
返回一个增加了相应亮度的种颜色。
lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30)
lighten(#800, 20%) => #e00
darken($color, $amount)
darken($color, $amount)
: 使一个颜色变暗。
$color
任意的颜色,RGB、HSL等等
$amount
:包含0%
~100%
的值。
返回一个减少了相应亮度的种颜色。
darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
darken(#800, 20%) => #200
其他
saturate($color, $amount)
: 使一个颜色更加饱和。
desaturate($color, $amount)
: 减少一个颜色的饱和度。
grayscale($color)
: 把一个颜色变灰,跟desaturate(color, 100%)
效果一样。
complement($color)
: 取得一个颜色的补充色。这个函数与adjust-hue($color,180deg)
取得的效果是一样的
invert($color, [$weight])
: 取得一个颜色的相反色,$weight
参数表示权重,是可选的。
相反色:把一个颜色的根据R、G和B的值进行计算的话,因为是十六进制,a(10) - b(11) - c(12) - d(13) - e(14) - f(15)
,#ad141e
的相反色第一位为15-10
,第二位为15-13
,第三位为15-1
即14
对应的十六进制为e
.......
//SCSS
$baseColor1: #ad141e;
$baseColor2: #d90fec;
.invert1 { background: invert($baseColor1); }
.invert2 { background: invert($baseColor2); }
//CSS
.invert1 { background: #52ebe1; } .invert2 { background: #26f013; }
Opacity Functions
alpha($color)
/ opacity($color)
:到是一个颜色的透明度值。对于没有透明的颜色为1
,这个函数也支持alpha(opacity=20)
语法定义的透明度。
rgba($color, $alpha)
: 改变指定颜色的透明度。
opacify($color, $amount)
/ fade-in($color, $amount)
: 使指定的颜色更不透明
opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 17, 0.8), 0.2) => #001
transparentize($color, $amount)
/ fade-out($color, $amount)
: 使指定的颜色更透明
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
Other Color Functions
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
: 对指定的颜色增加或减少相应一个或多个颜色值。
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
: 通过调整颜色的一个或者多个属性获取一个流畅颜色。
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)
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
: 更改颜色的一个或多个属性。
change-color(#102030, $blue: 5) => #102005
change-color(#102030, $red: 120, $blue: 5) => #782005
change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) => hsla(25, 100%, 40%, 0.8)
ie-hex-str($color)
: 将颜色转换为IE筛选器可以理解的格式。
ie-hex-str(#abc) => #FFAABBCC
ie-hex-str(#3322BB) => #FF3322BB
ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00