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. android自动化のadb常用命令(不定期更新)

    1. adb devices 执行结果是adb为每一个设备输出以下状态信息:序列号(serialNumber) — 由adb创建的使用控制台端口号的用于唯一标识一个模拟器或手机设备的字符串,格式是 & ...

  2. springboot在application.yml中使用了context-path属性导致静态资源法加载,如不能引入vue.js,jquery.js,css等等

    在springBoot配置中加入上下文路径 server.context-path=/csdn js,img等静态文件无法加载,出现404的问题 <script type="text/ ...

  3. VMware 15.0下载及安装教程

    虚拟机 VMware WorkStation Pro15 下载及安装详细解 9虚拟机 VMware WorkStation Pro15 下载及安装详细解. 虚拟机官方网站: https://www.v ...

  4. Oracle启动与关闭数据库实例

    Oracle数据库启动实例分为3个步骤: 启动实例 加载数据库 打开数据库 通用模式: STARTUP  [ nomount | mount | open | force ]  [resetrict] ...

  5. [SHELL]输出目录下所有的可执行文件,批量创建用户

    #!/bin/bash IFS=: for folder in $PATH #PATH变量分隔符为: do echo $folder echo ------------------ for file ...

  6. spark-shell解析

    spark-shell 作用: 调用spark-submit脚本,如下参数 --classorg.apache.spark.repl.Main --name "Spark shell&quo ...

  7. NHibernate3快速上手教程FluentNHibernate配置与DBHelper(已过期,有更好的)

    很多学习NHibernate的新手很容易卡在配置文件这一关,正所谓万事开头难,上手后再配合官方文档就比较容易了. 网上关于配置文件的资料非常多,但由于版本的问题,许多老的教程中都没有明确指出类库的版本 ...

  8. typescript 学习记录

    类型判断: typeJudge() { //typeof 用来判断变量类型 var s: string = 'egret'; var isString: boolean = typeof s === ...

  9. 国内版Office365实现MFA的方案(未完)

    现在二十一世纪互联版也可以实现了MFA,现在也就是2017年3月份,支持了PC,但是对移动端应用还是不支持的,请了解. 具体方法如下: 登录国内版Office365(事例为高级商业版 https:// ...

  10. python—IDLE的shell上下翻看历史

    Alt+p和Alt+n,分别向上(history previous)和向下(history next)调出使用过的历史命令.