Sass 颜色函数

时间:2022-07-19 10:20:21
 /*
* Sass 颜色函数
* RGB 颜色函数
* 1. rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
* rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
* #c82858
* 2. rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
* rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
* rgba(200, 40, 88, 0.65)
* 3. red($color):从一个颜色中获取其中红色值;
* red(#c82858) //从#c82858颜色值中得到红色值 200
* 200
* 4. green($color):从一个颜色中获取其中绿色值;
* green(#c82858) //从#c82858颜色值中得到绿色值 40
* 40
* 5. blue($color):从一个颜色中获取其中蓝色值;
* blue(#c82858) //从#c82858颜色值中得到蓝色值 88
* 88
* 6. mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
* mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
* rgba(200, 40, 80, 0.65105)
*/ /*
* rgba() 其语法主要有两种格式
* 1. rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来,和未转译的值一样
* 2. rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色
*/
$color: #f36;
.rgba {
color: rgba($color, .5);
}
/*
* mix() 语法如下
* mix($color-1, $color-2, $weight);
* $color-1 和 $color-2 指的是你需要合并的颜色,颜色可以是任何表达式,也可以是颜色变量。
* $weight 为 合并的比例(选择权重),默认值为 50%,其取值范围是 0~1 之间。
* 第三个参数是第一种颜色的比例值。
*/
$color1: #a63;
$color2: #fff;
.mix {
color: mix($color1, $color2, .25);
}

  输出:

 .rgba {
color: rgba(255, 51, 102, 0.5); } .mix {
color: #fefefe; }