sass-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]):把两种颜色混合在一起。
仅从概念上,或许大家没有太多的概念,我们通过下面的命令来做一个简单的测试:
接下来,使用 RGB 函数来进行计算,看其最终结果:
>> rgb(200,40,88) //根据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() 函数在实际中的运用。
sass-RGB颜色函数-RGB()颜色函数的更多相关文章
- Sass函数--颜色函数--RGB颜色函数
RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1. ...
- 2-4 Sass的函数功能-颜色函数
RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...
- 常用颜色的RGB值
RGB颜色表 白色:rgb(255,255,255) 黑色:rgb(0,0,0) 红色:rgb(255,0,0) 绿色:rgb(0,255,0) 蓝色:rgb(0,0,255) 青色:rgb(0,25 ...
- 常用icon以及color颜色RGB值和对应颜色效果图
Android谷歌官方扁平化设计常用icon集合 Android谷歌官方扁平化设计color颜色RGB值和对应颜色效果图.
- 定义设置颜色的RGB值的宏
//定义设置颜色的RGB值的宏 #define RGBA(r,g,b,a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha ...
- 保护眼睛,绿豆沙颜色的RGB值和HSL值
现在的人尤其是职场中人,每天都得花很长时间对着电脑,对眼睛的伤害很大,其实我们可以对电脑进行一个简单的设置,把窗口背景设置成绿豆沙颜色的,对眼睛的保护很有帮助的. 下面是绿豆沙颜色的RGB值和HSL值 ...
- 颜色的RGB值表示法
颜色的RGB值表示法 从物理光学试验中得出:红.绿.蓝三种色光是其他色光所混合不出来的.而这三种色光以不同比例的混合几乎可以得出自然界所有的颜色. 如红光与不同比例的绿光混合可以得出橙.黄.黄绿等色: ...
- 如何快速知道一个颜色的rgb值
1.如果你想使用某种颜色缺不知道rgb值是多少,可以将一张图片用系统自带的画图(我的系统是win7)0工具打开,点击编辑颜色就会出现调色板,然后就可以选择查看具体颜色的rgb值了 2.如果你想知道某个 ...
- JavaScript随机生成颜色以及十六进制颜色 与RGB颜色值的相互转换
/** * 随机生成颜色 * @return 随机生成的十六进制颜色 */ function randomColor(){ var colorStr=Math.floor(Math.random()* ...
随机推荐
- 图片没有.png或者jpg后缀能不能加载?
是可以的,如:http://mmbiz.qpic.cn/mmbiz_png/MW1VecOrnw6HUMvEUNUxibLVtbY2vHF8QkFyviaickh8pnsapQ8gOosdq13SBX ...
- 树上倍增 x
树上倍增. dfs序的做法: 思路: //f[i][j]表示dfs序中序号为i到序号为j的点之间深度最小的点的编号 dfs序[]//存0-...(id)编号 节点[]//存dfs序中所经过的节点号 d ...
- react-native 异常处理 Execution failed for task ':app:mergeDebugResources'.
1.react-native run-android 失败 * What went wrong:Execution failed for task ':app:mergeDebugResources' ...
- Python分析《武林外传》
我一向比较喜欢看武侠电影.小说,但是06年武林外传开播的时候并没有追剧,简单扫几眼之后发现他们都不会那种飞来飞去的打,一点也不刺激.09年在南京培训的时候,日子简单无聊透顶,大好的周末不能出门,只能窝 ...
- Windows命令学习
总: 1.window dos命令不区分大小写 2.指令参数 /a -a 等价 更倾向于 / 3.命令有疑问: CMD输入help 或者单条命令 /? help time /? 用到的实用命令总 ...
- 【CDN+】 Hbase入门 以及Hbase shell基础命令
前言 大数据的基础离不开Hbase, 本文就hbase的基础概念,特点,以及框架进行简介, 实际操作种需要注意hbase shell的使用. Hbase 基础 官网:https://hbase.ap ...
- 007-TreeMap、Map和Bean互转、BeanUtils.copyProperties(A,B)拷贝、URL编码解码、字符串补齐,随机字母数字串
一.转换 1.1.TreeMap 有序Map 无序有序转换 使用默认构造方法: public TreeMap(Map<? extends K, ? extends V> m) 1.2.Ma ...
- MySQL 对比数据库的表结构
有时候,需要对比一下测试环境和生产环境中,数据库的表结构是否有所差异.有两个常用的工具. AmpNmp.DatabaseCompare GUI 界面,支持多种数据库(MySQL.SQL Server. ...
- LeetCode 113. Path Sum II 动态演示
给第一个目标值,返回一棵树从根到叶子所有和等于目标值的路径. 经典的深度优先算法 /** * Definition for a binary tree node. * struct TreeNode ...
- 逻辑回归提高阈值对p和r的影响
这里我做了一个实验 也就是随着阈值的增大,precision增加或者不变,recall减少或者不变.