1只定义一次颜色

{优点：可以给变量赋予不同的值；

{缺点：变量名称更改与变量值混乱；

2变浅加深

/*颜色函数*/

.warning-box {

  background-color:lighten($color10, 93.5%);//等同于#eee

}

3HSLA

hsla(315, 100%饱和度, 50%亮度, 1)

如果想要颜色看起来更加饱和鲜艳，提高高合度跟亮度；0黑色。100%白色；

sass颜色的更多相关文章

  1. Sass 颜色函数

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

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

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

  3. sass、less和stylus的安装使用和入门实践

    刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...

  4. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  5. sass进阶篇

    @if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @ ...

  6. sass和less、stylus语法（2）

    6.运算符(Operations)CSS预处理器语言还具有运算的特性,其简单的讲,就是对数值型的Value(如:数字.颜色.变量等)进行加减乘除四则运算.这样的特性在CSS样式中是想都不敢想的,但在C ...

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

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

  8. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  9. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

随机推荐

  1. 初识nginx+tomcat

    百度百科说: Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯 ...

  2. Zend Guard Loader和Zend Optimizer的安装（更新中）

    本机上php是5.3.3的 下载安装程序   大概找对php.ini和apache的目录就对了  ,中途弹出提示框大概意思是安装过程中需要把apache关掉,不能用 下载地址:http://www.z ...

  3. git安装及使用简介

    从源代码安装 有人觉得从源码安装 Git 更实用,因为你能得到最新的版本. 二进制安装程序倾向于有一些滞后,当然近几年 Git 已经成熟,这个差异不再显著. 如果你想从源码安装 Git,需要安装 Gi ...

  4. python 序列类型

    1.不可变的序列类型:tuple.range.str.set 001:对于tuple 类型有如下几种构造方式 1.() 构造一个空的元组. 2.a | (a,) 构造一个只有一个元素的元组. 3.tu ...

  5. android Xml生成一条细线，以及获取屏幕宽度和高度

    <View android:layout_width="match_parent" android:layout_height="2dip" androi ...

  6. Java date

    http://liyongyao.blog.51cto.com/2895045/1206770 http://javaforu.com/

  7. android 自定义AlertDialog(一段)

    java: final AlertDialog dialog = new AlertDialog.Builder(mContext) .create(); dialog.setCancelable(f ...

  8. Hbase深入学习(一) 什么是hbase

    Hbase深入学习(一) 什么是hbase 一.hbase是什么?      首先hbase是一个在Hadoop的HDFS分布式存储系统上介于映射(key/value)的nosql的分布式数据库:它通 ...

  9. TCP的那些事（转载）

    (转载本站文章请注明作者和出处 酷 壳 – CoolShell.cn ,请勿用于任何商业用途) TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身 ...

  10. cocos2d-x 学习笔记一（概述）

    1.游戏-可控制的动画-连续的静态图像 2.关键帧驱动游戏 3.事件驱动型游戏 4.cocos2d-x 1.0 opengl-es 1.0;cocos2d-x 2.x opengl-es 2.0;co ...