颜色函数

rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色

rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色

red() 函数、 green() 函数、 blue() 函数：取红、绿、蓝色值

>> red(#f36)
255

mix()函数

Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色

mix($color-1,$color-2,$weight);

$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。

$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%

hsl()函数

  • hsl($hue,$saturation,$lightness)

    ：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；

>> hsl(200,30%,60%) //通过h200,s30%，l60%创建一个颜色
#7aa3b8
  • hsla($hue,$saturation,$lightness,$alpha) ：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
>> hsla(200,30%,60%,.8)//通过h200,s30%，l60%,a80%创建一个颜色
rgba(122, 163, 184, 0.8)
  • hue($color) ：从一个颜色中获取色相（hue）值；
>> hue(#7ab)//得到#7ab颜色的色相值
195deg

  • saturation($color)

     ：从一个颜色中获取饱和度（saturation）值；

>> saturation(#7ab)//得到#7ab颜色的饱和度值
33.33333%
  • lightness($color) ：从一个颜色中获取亮度（lightness）值；
>> lightness(#7ab)//得到#7ab颜色的亮度值
60%
  • adjust-hue($color,$degrees) ：通过改变一个颜色的色相值，创建一个新的颜色；
>> adjust-hue(#f36,150deg) //改变#f36颜色的色相值为150deg
#33ff66
  • lighten($color,$amount) ：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
>> lighten(#f36,50%) //把#f36颜色亮度提高50%
#ffffff
  • darken($color,$amount) ：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
>> darken(#f36,50%) //把#f36颜色亮度降低50%
#33000d
  • saturate($color,$amount) ：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
>> saturate(#f36,50%) //把#f36颜色饱和度提高50%
#ff3366
  • desaturate($color,$amount) ：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
>> desaturate(#f36,50%) //把#f36颜色饱和度降低50%
#cc667f
  • grayscale($color) ：将一个颜色变成灰色，相当于desaturate($color,100%);
>> grayscale(#f36) //把#f36颜色变成灰色
#999999
  • complement($color) ：返回一个补充色，相当于adjust-hue($color,180deg);
>> complement(#f36)
#33ffcc
  • invert($color) ：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
>> invert(#f36)
#00cc99

alpha()、opacity()函数

获取透明度

opacify()、fade-in()函数

透明度加法运算

transparentize()、 fade-out()函数

透明度减法运算

results matching ""

    No results matching ""