Sass基础——颜色 color 函数

5626 4 年前
在Sass的官方文档中,列出了Sass的颜色函数清单,从大的方面主要分为RGB、HSL和Opacity三大类函数,当然其还包括一些其他颜色函数,比如说adjust-color、change-color等等。

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): 修改给定颜色的色相值。

使用-360deg360deg之间的角度,然后返架指定颜色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-114对应的十六进制为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
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6