2、rgba() 函数主要用来将一个颜色根据透明度转换成 rgba 颜色。
其语法有两种格式：
rgba($red,$green,$blue,$alpha) //将一个rgba颜色转译出来，和未转译的值一样 rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色
其中 rgba($color,$alpha) 函数作用更大，主要运用在这样的情形之中：假设在实际中知道的颜色值是 #f36 或者 red，但在使用中，需要给他们配上一个透明度，这个时候在原来的 CSS 中，首先需要通过制图工具，得到 #f36 或 red 颜色的 R、G、B 值，而不能直接使用（注意 css3 是可以的，但是存在浏览器兼容问题）：
//CSS color: rgba(#f36,.5); //在css中，这是无效的写法
但在 Sass 中，RGBA() 函数就能解决这个问题。我们先来看一个简单的例子，假设在变量中定义了一个基本的变量：
$color: #f36; $bgColor: orange; $borderColor:green;
同时给他们加上 .5 的透明度：
//SCSS .rgba { color: rgba(#f36,.5); background: rgba(orange,.5); border-color: rgba(green,.5); }语法：
在这个实例中，我们使用了 Sass 的 rgba 函数，在括号是函数的参数，第一个参数是需要转换的颜色，他可以是任何颜色的表达方式，也可以是一个颜色变量；第二个参数是颜色的透明度，其值是 0~1 之间。上面的代码转译出来：
.rgba { color: rgba(255, 51, 102, 0.5); background: rgba(255, 165, 0, 0.5); border-color: rgba(0, 128, 0, 0.5); }在来看一个调用前面定义的变量：
//SCSS .rgba { color: rgba($color,.5); background: rgba($bgColor,.5); border-color: rgba($borderColor,.5); } 编译出来的 css 代码：
//CSS .rgba { color: rgba(255, 51, 102, 0.5); background: rgba(255, 165, 0, 0.5); border-color: rgba(0, 128, 0, 0.5); }
我想您应该会看到一个变化，通过 rgba 函数，指定一个透明值，将原色转换成另外一个颜色：
RGB颜色函数-Red()、Green()、Blue()函数
3、Red() 函数
red() 函数非常简单，其主要用来获取一个颜色当中的红色值。假设有一个 #f36 的颜色，如果你想得到 #f36 中的 red 值是多少，这个时候使用 red() 函数就能很简单获取。
>> red(#f36) 255
得到的值是”255”。（注意：在命令终端要先输入sass -i 命令）
4、Green() 函数
green() 函数和 red() 函数一样，用来获取某一个颜色值中 green 的值。同样拿 ”#f36“ 颜色为例：
>> green(#f36) 51
5、Blue() 函数
同理，blue() 函数是用来获取某一个颜色值中 blue 的值，如：
>> blue(#f36) 102
RGB颜色函数-Mix()函数
Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下：
mix($color-1,$color-2,$weight);
$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。
$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。
其使用方法也很简单：
mix(#f00, #00f) => #7f007f mix(#f00, #00f, 25%) => #3f00bf mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)
在前面的基础上，做一个修改：
//SCSS $color1: #a63; $color2: #fff; $bgColor1: #f36; $bgColor2: #e36; $borderColor1:#c36; $borderColor2:#b36; .mix { background: mix($bgColor1,$bgColor2,.75); color: mix($color1,$color2,.25); border-color: mix($borderColor1,$bgColor2,.05); }编译的 css 代码：
//CSS .mix { background: #ee3366; color: #fefefe; border-color: #ed33 }看下对比效果：
这就是 Mix 函数的工作原理，在函数中指定三个函数，前两个函数是你想混合的颜色（记住，你可以通过颜色变量、十六进制、RGBA、RGB、HSL 或者 HSLA 颜色值）。第三个参数是第一种颜色的比例值。
