sass的颜色函数
sass中有些非常实用的颜色处理函数,总结如下
1.颜色加深或变浅
lighten($color,$amount) //颜色变浅 darken($color,$amount) //颜色加深
例如:
lighten(#f36,50%) //把#f36颜色亮度提高50%
#ffffff darken(#f36,50%) //把#f36颜色亮度降低50%
#33000d
2.rgb和十六进制转换
rgb($red, $green, $blue) //根据RGB中的三个值计算出一个颜色;
rgba($red, $green, $blue, $alpha) //根据RGB中红、绿、蓝和透明度计算出一个颜色;
rgb转十六进制
rgb(255, 165, 0) //#ffa500
十六进制转rgb
rgba(#ff0000, 0.5); //Output is rgba(255,0,0,0.5);
sass的颜色函数的更多相关文章
- Sass关于颜色函数的乐趣
阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在 ...
- SCSS & SASS Color 颜色函数用法
最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20 ...
- Sass:RGB颜色函数-Mix()函数
Mix 函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色.其使用语法如下: mix($color-1,$color-2,$weight); $color-1 和 $color-2 指的是你需要 ...
- Sass:RGB颜色函数-Red()、Green()、Blue()函数
Red() 函数 red() 函数非常简单,其主要用来获取一个颜色当中的红色值.假设有一个 #f36 的颜色,如果你想得到 #f36 中的 red 值是多少,这个时候使用 red() 函数就能很简单获 ...
- 2-4 Sass的函数功能-颜色函数
RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...
- sass-RGB颜色函数-RGB()颜色函数
在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 ...
- Sass函数--颜色函数--RGB颜色函数
RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1. ...
- Sass 颜色函数
/* * Sass 颜色函数 * RGB 颜色函数 * 1. rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: * rgb(200,40,88) //根据r:200,g ...
- Sass函数--颜色函数--HSL函数
HSL函数简介HSL颜色函数包括哪些具体的函数,所起的作用是什么: hsl($hue,$saturation,$lightness):通过色相(hue).饱和度(saturation)和亮度(ligh ...
随机推荐
- centos7系统配置系统用户基于ssh的google身份验证
最近也是服务器各种被入侵,所以在安全上,要万分注意,特此记录,借助google的身份验证插件,获取动态验证码完成ssh登陆. OS: centos7 安装配置: 1. 安装epel源 yum -y i ...
- java Arrays.asList
List<String> list = Arrays.asList("A B C D E F G H I J K L ".split(" ")); ...
- php随机类型验证码
开发使用验证码的意义就是为了区别操作者是人还是机器,防止自动脚本对服务器造成灾难性的攻击 目前有各种各样的验证码种类,譬如:静态字符验证码.算术验证码.拖拽验证码.识别文字或识别物品验证码(高级),下 ...
- lesson 15 Fifty pence worth of trouble
lesson 15 Fifty pence worth of trouble appreciate =be grateful for We really appreciate all the help ...
- 【outPut_Class 输出类】使用说明
对象:outPut 说明:定义输出结果类的相关操作.此对象的核心是[JSON]类,所以它继承了[JSON]类的所有方法 重要: 输出结果样式为XML时,自带根节点"root".输出 ...
- poj 3468 (区间修改 区间查询)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions:147133 ...
- opencart
1. Deleting english language, what happens? Disable English tab , category and products 1) Fir ...
- catalan卡塔兰数
令h(0)=1,h(1)=1,卡塔兰数数满足递归式:h(n)= h(0)*h(n-1) + h(1)*h(n-2) + ... + h(n-1)h(0) (其中n>=2),这是n阶递推关系;还可 ...
- 菜鸟的飞翔日记-os篇
一轮王道os复习感想 1概述 虽然去年有上操作系统这门必修课,考的成绩也算理想,本来还有点沾沾自喜,嗯,觉得自己学的还不错,知道有一天我拿起了王道,(没给王道打广告)看王道的原因完全在于为考研做准备, ...
- Linux系统的性能测试
性能测试:CPU内存,硬盘IO读写,带宽速度,UnixBench 一.CPU物理个数.内核.超线程.多核心 1.登录Terminal,执行:cat /proc/cpuinfo,就会显示出主机的CPU详 ...