RGB颜⾊函数-RGB（）颜⾊函数
在 Sass 的官⽅⽂档中，列出了 Sass 的颜⾊函数清单，从⼤的⽅⾯主要分为 RGB , HSL 和 Opacity 三⼤函数，当然其还包括⼀些其他的颜⾊函数，⽐如说 adjust-color 和 change-color 等。在这章节中，将主要和⼤家⼀起探讨 Sass 颜⾊函数中常见的 RGB、HSL 和 Opacity 函数。
1、RGB颜⾊函数
RGB 颜⾊只是颜⾊中的⼀种表达式，其中 R 是 red 表⽰红⾊，G 是 green 表⽰绿⾊⽽B 是 blue 表⽰蓝⾊。在 Sass 中为 RGB 颜⾊提供六种函数：
rgb($red,$green,$blue)：根据红、绿、蓝三个值创建⼀个颜⾊；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建⼀个颜⾊；
red($color)：从⼀个颜⾊中获取其中红⾊值；
green($color)：从⼀个颜⾊中获取其中绿⾊值；
blue($color)：从⼀个颜⾊中获取其中蓝⾊值；
mix($color-1,$color-2,[$weight])：把两种颜⾊混合在⼀起。
仅从概念上，或许⼤家没有太多的概念，我们通过下⾯的命令来做⼀个简单的测试：
sass -i
在命令终端开启这个命令，相当于开启 Sass 的函数计算。
接下来，分别在终端使⽤ RGB 函数来进⾏计算，看其最终结果：
$ sass -i >> #c82858 //根据r:200,g:40,b:88计算出⼀个⼗六进制颜⾊值 #c82858 >> rgba(#c82858,.65) //根据#c82858的65%透明度计算出⼀个rgba颜⾊值 rgba(200, 40, 88, 0.65) >> red(#c82858) //从#c82858颜⾊值中得到红⾊值 200 200 >> green(#c82858) //从#c82858颜⾊值中得到绿⾊值 40 40 >> blue(#c82858) //从#c82858颜⾊值中得到蓝⾊值 88 88 >> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜⾊按⽐例混合得到⼀个新颜⾊ rgba(200, 40, 80, 0.65105)
从上⾯的简单运算结果可以很清晰的知道。在 RGB 颜⾊函数中，在实际中常⽤的主要是 rgba() 和 mix() 两个函数，⽽ rgb() 函数只能快速的将⼀个 rgb 颜⾊转换成⼗六进制颜⾊表达，red()、green() 和 blue() 函数，只能取得某⼀颜⾊的⼀个值，对于颜⾊上使⽤并⽆太⼤作⽤（或许他的好处，我还没
有理解过来）。接下来，主要来实战⼀下 rgba() 和 mix() 函数在实际中的运⽤。
RGB颜⾊函数-RGBA()函数
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 命令）
htmlborder4、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(6
3, 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 颜⾊值）。第三个参数是第⼀种颜⾊的⽐例值。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论