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的颜色函数的更多相关文章

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

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

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

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

  3. Sass:RGB颜色函数-Mix()函数

    Mix 函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色.其使用语法如下: mix($color-1,$color-2,$weight); $color-1 和 $color-2 指的是你需要 ...

  4. Sass:RGB颜色函数-Red()、Green()、Blue()函数

    Red() 函数 red() 函数非常简单,其主要用来获取一个颜色当中的红色值.假设有一个 #f36 的颜色,如果你想得到 #f36 中的 red 值是多少,这个时候使用 red() 函数就能很简单获 ...

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

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

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

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

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

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

  8. Sass 颜色函数

    /* * Sass 颜色函数 * RGB 颜色函数 * 1. rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: * rgb(200,40,88) //根据r:200,g ...

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

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

随机推荐

  1. centos7系统配置系统用户基于ssh的google身份验证

    最近也是服务器各种被入侵,所以在安全上,要万分注意,特此记录,借助google的身份验证插件,获取动态验证码完成ssh登陆. OS: centos7 安装配置: 1. 安装epel源 yum -y i ...

  2. java Arrays.asList

    List<String> list = Arrays.asList("A B C D E F G H I J K L ".split(" ")); ...

  3. php随机类型验证码

    开发使用验证码的意义就是为了区别操作者是人还是机器,防止自动脚本对服务器造成灾难性的攻击 目前有各种各样的验证码种类,譬如:静态字符验证码.算术验证码.拖拽验证码.识别文字或识别物品验证码(高级),下 ...

  4. lesson 15 Fifty pence worth of trouble

    lesson 15 Fifty pence worth of trouble appreciate =be grateful for We really appreciate all the help ...

  5. 【outPut_Class 输出类】使用说明

    对象:outPut 说明:定义输出结果类的相关操作.此对象的核心是[JSON]类,所以它继承了[JSON]类的所有方法 重要: 输出结果样式为XML时,自带根节点"root".输出 ...

  6. poj 3468 (区间修改 区间查询)

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions:147133   ...

  7. opencart

    1. Deleting english language, what happens?   Disable English tab , category and products     1) Fir ...

  8. 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阶递推关系;还可 ...

  9. 菜鸟的飞翔日记-os篇

    一轮王道os复习感想 1概述 虽然去年有上操作系统这门必修课,考的成绩也算理想,本来还有点沾沾自喜,嗯,觉得自己学的还不错,知道有一天我拿起了王道,(没给王道打广告)看王道的原因完全在于为考研做准备, ...

  10. Linux系统的性能测试

    性能测试:CPU内存,硬盘IO读写,带宽速度,UnixBench 一.CPU物理个数.内核.超线程.多核心 1.登录Terminal,执行:cat /proc/cpuinfo,就会显示出主机的CPU详 ...