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; }