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 ...
随机推荐
- uvaoj 10474 - Where is the Marble?(sort+lower_bound)
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 统计hive库表在具体下所有分区大小
1 查询具体表分区大小,以字节展示 hadoop fs -du /user/hive/warehouse/treasury.db/dm_user_excercise > dm_user_exce ...
- 【CSV数据文件】
文件参数化设置方法
- ThinkPHP - 5 - 学习笔记(2015.4.15)
ThinkPHP __construct()和__initialize() 1.__initialize()不是php类中的函数,php类的构造函数只有__construct().2.类的初始化:子类 ...
- Hadoop 版本 生态圈 MapReduce模型
忘的差不多了, 先补概念, 然后开始搭建集群实战 ... . 一 Hadoop版本 和 生态圈 1. Hadoop版本 (1) Apache Hadoop版本介绍 Apache的开源项目开发流程 : ...
- 《剑指offer》---把数组排成最小的数
本文算法使用python3实现 1 题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组 $ [3,32,321] $ ,则打印出这 ...
- 在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 ...
- 【alpha】Scrum站立会议第2次....10.17
小组名称:nice! 小组成员:李权 于淼 杨柳 刘芳芳 项目内容:约跑app 1.任务进度 成员 已完成 今日完成 李权 数据库设计 消息发送代码实现 于淼 注册.登录界面,以及登录界面后台代码.发 ...
- vue服务端渲染axios预取数据
首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...
- 原生javascript自定义input[type=radio]效果
2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...