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. 「Python」conda与pip升级所有的包

    conda: conda update --a pip: pip freeze --local | grep -v '^-e' | cut -d = -f 1 | xargs -n1 sudo pip ...

  2. 前后端分离.net core + vuejs + element

    查找一些资料,比较了elementui以及Iview,最终还是选择了elementui搭建前后端分离框架,废话少说了,开始搭建环境: 1.基础软件环境 vue开发环境安装: ①nodejs (我安装的 ...

  3. Linux命令应用大词典-第12章 程序编译

    12.1 gcc:GNU项目的C和C++编译器 12.2 gdberver:为GNU调试的远程服务器 12.3 cmake:跨平台的Makefile生成工具 12.4 indent:更改通过插入或删除 ...

  4. 【WXS全局对象】JSON

    方法: 原型:JSON.stringify( Object ) 说明:将 object 对象转换为 JSON 字符串,并返回该字符串. 返回:[String] 原型:JSON.parse( [Stri ...

  5. js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对

    一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...

  6. 利用nohup后台运行jar文件包程序

    Linux 运行jar包命令如下: 方式一: java -jar XXX.jar特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二 j ...

  7. android AVD创建

    参数详解:AVD name:是要填写的虚拟机名称,这个自己随便取名就行了,要纯英文和数字组成Device:这里是要选择模拟的设备,一般选择3.2*QVGA(ADP2)(320*480: mdpi)这个 ...

  8. Apache——访问控制

    Order 指定执行允许访问规则和拒绝访问规则 Deny 定义拒绝访问列表 Allow 定义允许访问列表 Order allow,deny  先执行允许,再执行拒绝 Order deny,allow ...

  9. Python3 Tkinter-Label

    1.创建 from tkinter import * root=Tk() root.title('Hello tkinter!') root.mainloop() 2.使用内置位图 from tkin ...

  10. 操作系统及Python解释器工作原理讲解

    操作系统介绍 操作系统位于计算机硬件与应用软件之间 是一个协调.管理.控制计算机硬件资源与软件资源的控制程序 操作系统功能: 控制硬件 把对硬件复杂的操作封装成优美简单的接口(文件),给用户或者应用程 ...