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. uvaoj 10474 - Where is the Marble?(sort+lower_bound)

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  2. 统计hive库表在具体下所有分区大小

    1 查询具体表分区大小,以字节展示 hadoop fs -du /user/hive/warehouse/treasury.db/dm_user_excercise > dm_user_exce ...

  3. 【CSV数据文件】

    文件参数化设置方法

  4. ThinkPHP - 5 - 学习笔记(2015.4.15)

    ThinkPHP __construct()和__initialize() 1.__initialize()不是php类中的函数,php类的构造函数只有__construct().2.类的初始化:子类 ...

  5. Hadoop 版本 生态圈 MapReduce模型

    忘的差不多了, 先补概念, 然后开始搭建集群实战 ... . 一 Hadoop版本 和 生态圈 1. Hadoop版本 (1) Apache Hadoop版本介绍 Apache的开源项目开发流程 : ...

  6. 《剑指offer》---把数组排成最小的数

    本文算法使用python3实现 1 题目描述:   输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组 $ [3,32,321] $ ,则打印出这 ...

  7. 在64位的环境下利用Jet来操作Access,Excel和TXT

    For example, you have a 32-bit application that uses the Microsoft OLE DB Provider for Jet. If you m ...

  8. 【alpha】Scrum站立会议第2次....10.17

    小组名称:nice! 小组成员:李权 于淼 杨柳 刘芳芳 项目内容:约跑app 1.任务进度 成员 已完成 今日完成 李权 数据库设计 消息发送代码实现 于淼 注册.登录界面,以及登录界面后台代码.发 ...

  9. vue服务端渲染axios预取数据

    首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...

  10. 原生javascript自定义input[type=radio]效果

    2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...