您的位置:首页 > 其它

Sass 颜色函数

2015-11-18 22:18 176 查看
/*
* 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; }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: