1、Sass是这个世界上最成熟、稳定和强大的专业级CSS扩展语言。,Sass, Sass官网 http:/sass-,目录,Sass介绍,Css预处理器,Css预处理器定义了一种“中间语言”，将 Css 作为目标生成文件，为 Css 增加了“编程”的特性，开发者使用这种语言进行编码，然后再编译成正常的 Css 文件供项目使用。,易于阅读,易于维护,适应性强,Sass(Scss) Less Stylus,Turbine Swithch CSS CSS Cacheer DT CSS,Sass,Sass是最早的Css预处理语言，采用Ruby语言编写，诞生于2007年。刚开始不被大众接受，使用率不高。由于
2、其强大的功能和 Ruby on Rails 的大力推动，很多人选择了Sass。Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的Css代码，这一代的Sass也被称为Scss。,功能丰富,成熟,兼容CSS语法,社区,前端框架基石,久经考验,Sass & Scss,Sass和Scss平时都称之为Sass，是同一个东西。区别有两点：,1、文件后缀 (扩展名) 不同: Sass 以“.sasss”为扩展名，Scss 以“.scss”为扩展名；,2、书写方式 (语法) 不同: Sass 以严格的缩进式语法规则来书写，不带大括号和分号; Scss 的书写方式和 Css 语法非常类似（越来越受欢
3、迎原因之一）。,目录,Sass安装及编译,Mac下安装Sass,Sass基于Ruby语言开发，因此安装Sass前需要安装Ruby。 Mac预装了Ruby，所以直接在“终端”执行命令即可。,gem install sass,这将为您安装Sass和任何依赖项。 如果你得到一个错误消息，可能需要使用sudo命令安装Sass gem:,sudo gem install sass,sass -v,它应该返回Sass 3.x.x (Selective Steve) 恭喜你！你已经成功安装了Sass。,Windows下安装Sass,1、首先需要安装Ruby，先从官网下载Ruby并安装：,http:/ruby
4、installer.org/downloads,Windows下安装Sass,安装完成后需测试安装有没有成功，运行CMD输入以下命令：,ruby -v,如安装成功会打印：,ruby 2.2.2p95 (2015-04-13 revision 50295) i386-mingw32,如上已经安装成功。 因为国内网络的问题导致gem源间歇性中断，因此需要更换gem源。,Windows下安装Sass,2、使用淘宝的gem源（https:/ruby.taobao.org/）如下：,/ 删除原gem源 gem sources -remove https:/rubygems.org/ 添加国内淘宝源 ge
5、m sources -a https:/ruby.taobao.org/ 打印是否替换成功 gem sources -l/ 更换成功后打印如下 * CURRENT SOURCES * https:/ruby.taobao.org/,Windows下安装Sass,3、安装Sass：,gem install sass,安装完成后，可以通过命令来确认应用已经正确地安装到了电脑中：,sass -v,它应该返回Sass 3.x.x (Selective Steve)，安装成功。,Sass常用命令,Sass常用更新、查看版本、卸载等命令：,/ 更新Sass。维护Sass的团队会不断的为Sass添加新的功能
6、，保持最新版本无须卸载，只需要执行更新命令即可。 gem update sass/ 查看Sass版本、检测是否安装成功 sass -v/ 查看Sass帮助 sass h/ 卸载Sass gem uninstall sass,Sass编译,命令行编译：终端、CMD,GUI软件编译：如 CodeKit、Koala、Compass、Scout 自动化编译：如 Gulp、Grunt,Sass四种编译格式: Nested 嵌套 expanded 展开 compact 紧凑 compressed 压缩,/ 单文件编译 sass input.scss output.css/ 单文件监听 sass -watc
7、h input.scss:output.css/ 监听整个目录 sass -watch app/sass:public/stylesheets,安装Compass,安装Compass：,gem install compass,sass -v,它应该返回Compass 1.x.x (Polaris)，安装成功。,compass create myproject / 创建项目， compass compile / 编译 compass watch / 监听,目录,Sass基础,变量,普通变量：,/ Scss,/ 编译后css,默认变量：,/ Scss,/ 编译后css,Sass 使用美元符号“$”
8、来声明变量。,变量,Sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量 之前 重新声明下变量即可。,/ Scss,/ 编译后css,!default; 的作用在于降低变量的优先级（备胎），不至于因为排序的问题覆盖掉上一条的相同命名的变量。它的使用场景大多在 组件化开发 中。 !global; 慎用，它完全破坏了作用域规则。,全局变量&局部变量,可以简单地这么理解：全局变量就是定义在元素外面的变量，局部变量是定义在元素内部的变量。,/ Scss,/ 编译后css,全局变量的影子,当在局部范围声明一个已经存在于全局范围内的变量时，局部变量就成为了 全
9、局变量的影子 。局部变量基本上只会在局部范围内覆盖全局变量。,/ Scss,/ 编译后css,import,Sass扩展了Css的import规则，让它能够引入Scss和Sass 文件。所有引入的Scss和 Sass 文件都会被合并并输出一个单一的Css文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。,/ import,/ 通过一个 import 引入多个文件,如果不希望引入的Sass文件被编译为单独的Css文件，需要在文件名前面加一个下划线。 引入时可以省略掉文件名前面的下划线。,/ 例如有个引入的文件 _colors.scss ，无须带下划线和后缀,嵌套,S
10、ass的嵌套分为三种：选择器嵌套、属性嵌套、伪类嵌套。,/ Html,/ Css,/ Scss,选择器嵌套：,嵌套,Css 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，还有 margin、padding、font 等属性。可以使用：,/ Css,/ Scss,属性嵌套：,嵌套,伪类嵌套和属性嵌套非常类似，不过它需要借助&符号一起配合使用。,/ Scss,/ 编译后css,伪类嵌套：,混合宏,项目中有几处小样式类似，可以使用变量来统一处理。需要重复使用大段的样式时，变量就无法达到目的了。这个时候就需要混合宏来搞定。,/ 不带参数混合宏,/ 复杂的混合
11、宏,mixin 用来声明混合宏，类似 Css 中的 media、font-face include 用来来调用声明好的混合宏。,/ 带参数混合宏,混合宏,/ 声明,/ 编译后css,/ 调用,声明&调用：,/ 声明,/ 编译后css,/ 调用，传一个参数值,传参(不带值)：,混合宏,传参(带值)：,传参(多个值)：,/ 声明，传一个默认参数值,/ 编译后css,/ 调用,/ 声明,/ 调用，传多个参数值,/ 编译后css,混合宏的缺点,混合宏对于复用重复的代码块很方便，但它会生成冗余的代码块，相同代码块不能智能合并。比如在不同的地方调用一个相同的混合宏时。,/ 声明、调用,/ 编译后css,继
12、承,Sass通过关键词 extend 来继承已存在的类样式块，实现代码的继承。,/ Scss,/ 编译后css,占位符,Sass的占位符 %placeholder 声明的代码，如果不被 extend 调用的话，不会产生任何代码。避免了代码冗余的产生。,/ 未被调用,/ 被调用,/ 编译后css,/ 只存在于SCSS 文件中,/ 合并了相同代码,什么时候用啥,占位符独立定义，不调用时不产生任何代码；继承首先有一个基类存在，不管调用不调用，基类的样式都将会编译到 Css 代码中。 来看一个表格：,插值,使用Css预处理器的一个主要原因是想获得一个更好的结构体系。你想写更干净的、高效的、面向对象的C
13、ss，Sass中的插值是重要的一部分。,/ Scss,/ 编译后css,插值,/ Scss,/ 编译后css,当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。,/ 上面的代码在编译时会报错： error style.scss (Line 7: Invalid CSS after “.nclude updated-“: expected “, was “#$flag;“),#不是随处可用，也不能在 mixin 中调用，可以在 extend 中使用。,/ Scss,加法、减法,/ Scss,/ 编译后css,加法：,/ Scss,/ 单位不同，编译时会报错,/ 编
14、译后css,减法：,/ 单位不同，编译时会报错,乘法、除法,/ Scss,/ 编译后css,乘法：,/ Scss,/ 编译后css,除法：,/ 这些编译时都会报错,/ Scss,/ 编译后css,除法：“”被当作除法运算符的情况,/ Scss, 数值或它的任意部分存储在变量中或是函数的返回值。 数值被圆括号包围。 数值是另一个数学表达式的一部分。,/ 编译后css,/ Scss,/ 编译后css,变量计算,Sass 除了可以使用数值进行运算之外，还可以使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。,/ Scss,/ 编译后css,颜色运算、数字运算,/ Scss,/ 编译后c
15、ss,颜色（分段运算）：,/ Scss,/ 编译后css,数字：,/ 数字运算包括前面介绍的：加法、减法、乘法、除法等。用括号来修改运算顺序。,/ Scss,/ 编译后css,字符运算,Sass中可以通过加法符号“+”来对字符串进行连接。,/ Scss,/ 编译后css,/ Scss,/ 编译后css,/ Scss,/ 编译后css,/ 引号在+左侧，编译后带引号,/ 引号在+右侧，编译后不带引号,目录,Sass的控制语句,if 指令,if 指令可以根据条件来处理样式块，条件为true返回一个样式块，false返回另外样式块。除了if之外，还可以配合else、else if使用。,/ Scss
16、,/ 编译后css,for 循环,for 循环有两种形式： for $i from through 包括end这个数 for $i from to 不包括end这个数,/ Scss,/ 编译后css,/ Scss,/ 编译后css,for 循环,for应用在网格系统的示例代码：,/ Scss,/ 编译后css,each 循环,each 循环就是去遍历一个列表，然后从列表中取出对应的值。 each $var in , $var 是个变量名，返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。,/ Scss,/ 编译后css,while 循环,while 循环和
17、 for类似，后面的条件为 true 就会执行，并且会生成不同的样式块，直到表达式值为 false 时停止循环。,/ Scss,/ 编译后css,目录,Others,注释,良好的注释能帮助自己或者别人阅读源码。Sass 的注释有两种方式：,/ Scss,/ 编译后css,1、类似 CSS 的注释方式 /* 我是注释信息 */ 2、类似 JavaScript 的注释方式 / 我是注释信息,函数,Sass自备一系列的函数功能。主要包括：字符串函数、数字函数、列表函数、Introspection 函数、三元函数、颜色函数等。还可以自定义函数。,字符串函数 unquote($string)： 删除字符
18、串中的引号； quote($string)： 给字符串添加引号； To-upper-case()： 将字符串小写字母转换成大写字母； To-lower-case()： 将字符串转换成小写字母。,数字函数 percentage($value)： 将一个不带单位的数转换成百分比值； round($value)： 将数值四舍五入，转换成一个最接近的整数； ceil($value)： 将大于自己的小数转换成下一位整数； floor($value)： 将一个数去除他的小数部分； abs($value)： 返回一个数的绝对值； min($numbers)： 找出几个数值之间的最小值； max($numbe
19、rs)： 找出几个数值之间的最大值； random(): 获取随机数。,函数,列表函数 length($list)： 返回一个列表的长度值； nth($list, $n)： 返回一个列表中指定的某个标签值 join($list1, $list2, $separator)： 将两个列给连接在一起，变成一个列表； append($list1, $val, $separator)： 将某个值放在列表的最后； zip($lists)： 将几个列表结合成一个多维的列表； index($list, $value)： 返回一个值在列表中的位置值。,Introspection 函数 type-of($valu
20、e)： 返回一个值的类型； unit($number)： 返回一个值的单位； unitless($number)： 判断一个值是否带有单位； comparable($number-1, $number-2)： 判断两个值是否可以做加、减和合并。,Opacity函数 alpha($color) /opacity($color)：获取颜色透明度值； rgba($color, $alpha)：改变颜色的透明度值； opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明； transparentize($color, $amount) /
21、 fade-out($color, $amount)：使颜色更加透明。,Sass Maps的函数 map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。 map-merge($map1,$map2)：将两个 map 合并成一个新的 map。 map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。 map-keys($map)：返回 map 中所有的 key。 map-values($map)：返回 map 中所有的 value。 map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对
22、应的 value 值，如果有返回 true，否则返回 false。 keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。,RGB颜色函数 rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色； rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色； red($color)：从一个颜色中获取其中红色值； green($color)：从一个颜色中获取其中绿色值； blue($color)：从一个颜色中获取其中蓝色值； mix($color-1,$color-2,$weight)：
23、把两种颜色混合在一起。,函数,Miscellaneous函数（三元函数） if($condition,$if-true,$if-false)：条件成立时，返回的值为 $if-true，否则返回值为$if-false。,HSL函数 hsl($hue,$saturation,$lightness)： 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色； hsla($hue,$saturation,$lightness,$alpha)： 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色； h
24、ue($color)：从一个颜色中获取色相（hue）值； saturation($color)：从一个颜色中获取饱和度（saturation）值； lightness($color)：从一个颜色中获取亮度（lightness）值； adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色； lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色； darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色； saturate($color,$amount)：通过改变颜色的
25、饱和度值，让颜色更饱和，从而创建一个新的颜色 desaturate($color,$amount)： 通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色； grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%); complement($color)：返回一个补充色，相当于adjust-hue($color,180deg); invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。,函数,SCSS编码规范,1、文件头部添加charset “UTF-8“ 2、import 下划线及后缀名都省略(.css除外) 3、所有导入文件以下划线 _开头 4、可覆盖变量定义时加上 !default; 5、mixin 中参数有默认值的放在没有默认值前面 6、模块文件的变量在模块文件头部申明 7、如需extend，要先设计成%,学习途径,http:/www.sass.hk/sass-course.html http:/ http:/ http:/ http:/ http:/ http:/sass- 田文锋 邮箱: ,
