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

Sass 颜色函数的更多相关文章

  1. 2-4 Sass的函数功能-颜色函数

    RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...

  2. sass-RGB颜色函数-RGB()颜色函数

    在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 ...

  3. Sass关于颜色函数的乐趣

    阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在 ...

  4. Sass函数--颜色函数--RGB颜色函数

    RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1. ...

  5. Sass函数--颜色函数--HSL函数

    HSL函数简介HSL颜色函数包括哪些具体的函数,所起的作用是什么: hsl($hue,$saturation,$lightness):通过色相(hue).饱和度(saturation)和亮度(ligh ...

  6. SCSS & SASS Color 颜色函数用法

    最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20 ...

  7. 2-2 Sass的函数功能-字符串与数字函数

    Sass的函数简介 在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: 字符串函数 数字函数 列表函 ...

  8. 【Sass/SCSS】我花4小时整理了的Sass的函数

    [Sass/SCSS]我花4小时整理了的Sass的函数 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...

  9. sass颜色

    1只定义一次颜色 {优点:可以给变量赋予不同的值: {缺点:变量名称更改与变量值混乱: 2变浅加深 /*颜色函数*/ .warning-box { background-color:lighten($ ...

随机推荐

  1. Thunder团队第六周 - Scrum会议2

    Scrum会议2 小组名称:Thunder 项目名称:i阅app Scrum Master:宋雨 工作照片: 参会成员: 王航:http://www.cnblogs.com/wangh013/ 李传康 ...

  2. Alpha版——版本控制报告(Thunder)

    Part One 回答问题: 0.在吹牛之前,先回答这个问题:如果你的团队来了一个新队员,有一台全新的机器,你们是否有一个文档,只要设置了相应的权限,她就可以根据文档,从头开始搭建环境,并成功地把最新 ...

  3. Debian实验机 常用命令

    1.开启中文输入法 fcitx 2. 开启无线连接 wicd 3. 远程连接 ssh root@XXX.XXX.XXX.XXX 4. 启动Ulipad ~/ulipad-master# python ...

  4. iOS-addSubView时给UIView添加效果

    CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; ...

  5. 异常--throw

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 【EF】EF实现大批量数据库插入操作

    通过参考http://www.itnose.net/news/171/6306259里面介绍的方法,我们可以在程序的解决方案的引用中选择NuGet管理包中添加  该扩展方法提供BulkInsert() ...

  7. Qt入门实例

    一.基于Qt设计师 1.创建一个GUI项目,选择“Qt4 Gui Application”.其中还有Empty Qt4 Project(空的工程),Qt4 Console Applicaiton(基于 ...

  8. Git更新github项目

    1. 把github上你想要更新修改的项目克隆到本地 $ git clone https://github.com/delav/test.git 2. 根据自己需求对项目进行修改 3. 把项目放到缓存 ...

  9. Socket_SSH-2(大文件的一次传输)

    import socket,os server=socket.socket() server.bind(('localhost',9999)) server.listen() while True: ...

  10. [SDOI2015]约数个数和 莫比乌斯反演

    ---题面--- 题解: 为什么SDOI这么喜欢莫比乌斯反演,,, 首先有一个结论$$d(ij) = \sum_{x|i}\sum_{y|j}[gcd(x, y) == 1]$$为什么呢?首先,可以看 ...