Sass 颜色函数

 1 /*
 2 * Sass 颜色函数
 3 * RGB 颜色函数
 4 *  1. rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
 5 *     rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
 6 *     #c82858
 7 *  2. rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
 8 *     rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
 9 *     rgba(200, 40, 88, 0.65)
10 *  3. red($color)：从一个颜色中获取其中红色值；
11 *     red(#c82858) //从#c82858颜色值中得到红色值 200
12 *     200
13 *  4. green($color)：从一个颜色中获取其中绿色值；
14 *     green(#c82858) //从#c82858颜色值中得到绿色值 40
15 *     40
16 *  5. blue($color)：从一个颜色中获取其中蓝色值；
17 *     blue(#c82858) //从#c82858颜色值中得到蓝色值 88
18 *     88
19 *  6. mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
20 *     mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
21 *     rgba(200, 40, 80, 0.65105)
22 */
23 
24 /*
25 * rgba() 其语法主要有两种格式
26 *  1. rgba($red,$green,$blue,$alpha)  //将一个rgba颜色转译出来，和未转译的值一样
27 *  2. rgba($color,$alpha)  //将一个Hex颜色转换成rgba颜色
28 */
29 $color: #f36;
30 .rgba {
31     color: rgba($color, .5);
32 }
33 /*
34 * mix() 语法如下
35 *  mix($color-1, $color-2, $weight);
36 *  $color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。
37 *  $weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。
38 *  第三个参数是第一种颜色的比例值。
39 */
40 $color1: #a63;
41 $color2: #fff;
42 .mix {
43     color: mix($color1, $color2, .25);
44 }

1 .rgba {
2   color: rgba(255, 51, 102, 0.5); }
3 
4 .mix {
5   color: #fefefe; }