Sass研究与学习

1、 Sass介绍 Css预处理器定义了一种“中间语言”，将 Css 作为目标生成文件，为 Css 增加了“编程”的特性，开发者使用这种语言进行编码，然后再编译成正常的 Css 文件供项目使用。易于阅读易于维护适应性强Sass(Scss) Less Stylus Turbine Swithch CSS CSS Cacheer DT CSS Sass是最早的Css预处理语言，采用Ruby语言编写，诞生于2007年。刚开始不被大众接受，使用率不高。由于其强大的功能和 Ruby on Rails 的大力推动，很多人选择了Sass。Sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的Css代码，

2、这一代的Sass也被称为Scss。功能丰富成熟兼容CSS语法社区前端框架基石久经考验 Sass和Scss平时都称之为Sass，是同一个东西。区别有两点：1、文件后缀 (扩展名) 不同:Sass 以“.sasss”为扩展名，Scss 以“.scss”为扩展名；2、书写方式 (语法) 不同:Sass 以严格的缩进式语法规则来书写，不带大括号和分号;Scss 的书写方式和 Css 语法非常类似（越来越受欢迎原因之一）。 Sass安装及编译 Sass基于Ruby语言开发，因此安装Sass前需要安装Ruby。Mac预装了Ruby，所以直接在“终端”执行命令即可。gem install sass这将为您安

3、装Sass和任何依赖项。如果你得到一个错误消息，可能需要使用sudo命令安装Sass gem:sudo gem install sasssass -v它应该返回Sass 3.x.x (Selective Steve)恭喜你！你已经成功安装了Sass。1、首先需要安装Ruby，先从官网下载Ruby并安装：/downloads安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。注意：安装完成后需测试安装有没有成功，运行CMD输入以下命令：ruby -v如安装成功会打印：ruby 2.2.2p95 (

4、2015-04-13 revision 50295) i386-mingw32如上已经安装成功。因为国内网络的问题导致gem源间歇性中断，因此需要更换gem源。2、使用淘宝的gem源（/）如下：/ 删除原gem源gem sources -remove / 添加国内淘宝源gem sources -a / 打印是否替换成功gem sources -l/ 更换成功后打印如下* CURRENT SOURCES */3、安装Sass：g

5、em install sass安装完成后，可以通过命令来确认应用已经正确地安装到了电脑中：sass -v它应该返回Sass 3.x.x (Selective Steve)，安装成功。Sass常用更新、查看版本、卸载等命令：/ 更新Sass。维护Sass的团队会不断的为Sass添加新的功能，保持最新版本无须卸载，只需要执行更新命令即可。gem update sass/ 查看Sass版本、检测是否安装成功sass -v/ 查看Sass帮助sass h/ 卸载Sassgem uninstall sass 命令行编译：终端、CMDGUI软件编译：如 CodeKit、Koala、Compass、Scou

6、t自动化编译：如 Gulp、GruntSass四种编译格式: Nested 嵌套 expanded 展开 compact 紧凑 compressed 压缩/ 单文件编译sass input.scss output.css/ 单文件监听sass -watch input.scss:output.css/ 监听整个目录sass -watch app/sass:public/stylesheets安装Compass：gem install compasssass -v它应该返回Compass 1.x.x (Polaris)，安装成功。compass create myproject/ 创建项目，co

7、mpass compile/ 编译compass watch/ 监听创建项目成功后，目录里会有一个 config.rb 配置文件。注意： Sass基础普通变量：/ Scss/ 编译后css默认变量：/ Scss/ 编译后cssSass 使用美元符号“$”来声明变量。Sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量 之前 重新声明下变量即可。/ Scss/ 编译后css声明一个只使用一次或永远不需要更新的变量是没有意义的。注意：!default; 的作用在于降低变量的优先级（备胎），不至于因为排序的问题覆盖掉上一条的相同命名的变量。它的使用场景大

8、多在 组件化开发 中。!global; 慎用，它完全破坏了作用域规则。可以简单地这么理解：全局变量就是定义在元素外面的变量，局部变量是定义在元素内部的变量。/ Scss/ 编译后css当在局部范围声明一个已经存在于全局范围内的变量时，局部变量就成为了 全局变量的影子 。局部变量基本上只会在局部范围内覆盖全局变量。/ Scss/ 编译后cssSass扩展了Css的import规则，让它能够引入Scss和Sass 文件。所有引入的Scss和 Sass 文件都会被合并并输出一个单一的Css文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。/ import/ 通过一个 i

9、mport 引入多个文件如果不希望引入的Sass文件被编译为单独的Css文件，需要在文件名前面加一个下划线。 引入时可以省略掉文件名前面的下划线。/ 例如有个引入的文件 _colors.scss ，无须带下划线和后缀Sass的嵌套分为三种：选择器嵌套、属性嵌套、伪类嵌套。/ Html/ Css/ Scss合理使用嵌套。嵌套的层级越深，编译出来的CSS代码选择器层级也会越深。注意：选择器嵌套：Css 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，还有 margin、padding、font 等属性。可以使用：/ Css/ Scss属性嵌套：伪类嵌套和属

10、性嵌套非常类似，不过它需要借助&符号一起配合使用。/ Scss/ 编译后css伪类嵌套：项目中有几处小样式类似，可以使用变量来统一处理。需要重复使用大段的样式时，变量就无法达到目的了。这个时候就需要混合宏来搞定。/ 不带参数混合宏/ 复杂的混合宏mixin 用来声明混合宏，类似 Css 中的 media、font-faceinclude 用来来调用声明好的混合宏。/ 带参数混合宏/ 声明/ 编译后css/ 调用声明&调用：/ 声明/ 编译后css/ 调用，传一个参数值传参(不带值)：传参(带值)：传参(多个值)：/ 声明，传一个默认参数值/ 编译后css/ 调用/ 声明/ 调用，传多个参数值/

11、 编译后css混合宏对于复用重复的代码块很方便，但它会生成冗余的代码块，相同代码块不能智能合并。比如在不同的地方调用一个相同的混合宏时。/ 声明、调用/ 编译后cssSass通过关键词 extend 来继承已存在的类样式块，实现代码的继承。/ Scss/ 编译后cssSass的占位符 %placeholder 声明的代码，如果不被 extend 调用的话，不会产生任何代码。避免了代码冗余的产生。/ 未被调用/ 被调用/ 编译后css/ 只存在于SCSS 文件中/ 合并了相同代码占位符独立定义，不调用时不产生任何代码；继承首先有一个基类存在，不管调用不调用，基类的样式都将会编译到 Css 代码中

12、。来看一个表格：使用Css预处理器的一个主要原因是想获得一个更好的结构体系。你想写更干净的、高效的、面向对象的Css，Sass中的插值是重要的一部分。/ Scss/ 编译后csseach.in.语句会在 Sass进阶 中介绍。说明：/ Scss/ 编译后css当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。/ 上面的代码在编译时会报错：error style.scss (Line 7: Invalid CSS after .nclude updated-: expected , was #$flag;)#不是随处可用，也不能在 mixin 中调用，可以在 ex

13、tend 中使用。/ Scss/ Scss/ 编译后css加法：/ Scss/ 单位不同，编译时会报错/ 编译后css减法：/ 单位不同，编译时会报错/ Scss/ 编译后css乘法：/ Scss/ 编译后css除法：/ 这些编译时都会报错/ Scss/ 编译后css/ Scss 数值或它的任意部分存储在变量中或是函数的返回值。 数值被圆括号包围。 数值是另一个数学表达式的一部分。/ 编译后css/ Scss/ 编译后cssSass 除了可以使用数值进行运算之外，还可以使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。/ Scss/ 编译后css/ Scss/ 编译后css颜色（

14、分段运算）：/ Scss/ 编译后css数字：/ 数字运算包括前面介绍的：加法、减法、乘法、除法等。用括号来修改运算顺序。/ Scss/ 编译后cssSass中可以通过加法符号“+”来对字符串进行连接。/ Scss/ 编译后css/ Scss/ 编译后css/ Scss/ 编译后css/ 引号在+左侧，编译后带引号/ 引号在+右侧，编译后不带引号 Sass的控制语句 if 指令可以根据条件来处理样式块，条件为true返回一个样式块，false返回另外样式块。除了if之外，还可以配合else、else if使用。/ Scss/ 编译后css for 循环有两种形式：for $i from thr

15、ough 包括end这个数for $i from to 不包括end这个数/ Scss/ 编译后css/ Scss/ 编译后css for应用在网格系统的示例代码：/ Scss/ 编译后css each 循环就是去遍历一个列表，然后从列表中取出对应的值。each $var in , $var 是个变量名，返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。/ Scss/ 编译后css while 循环和 for类似，后面的条件为 true 就会执行，并且会生成不同的样式块，直到表达式值为 false 时停止循环。/ Scss/ 编译后css Others良好

16、的注释能帮助自己或者别人阅读源码。Sass 的注释有两种方式：/ Scss/ 编译后css1、类似 CSS 的注释方式 /* 我是注释信息 */2、类似 JavaScript 的注释方式 / 我是注释信息Sass自备一系列的函数功能。主要包括：字符串函数、数字函数、列表函数、Introspection 函数、三元函数、颜色函数等。还可以自定义函数。字符串函数unquote($string)：删除字符串中的引号；quote($string)：给字符串添加引号；To-upper-case()：将字符串小写字母转换成大写字母；To-lower-case()：将字符串转换成小写字母。数字函数perce

17、ntage($value)：将一个不带单位的数转换成百分比值；round($value)：将数值四舍五入，转换成一个最接近的整数；ceil($value)：将大于自己的小数转换成下一位整数；floor($value)：将一个数去除他的小数部分；abs($value)：返回一个数的绝对值；min($numbers)：找出几个数值之间的最小值；max($numbers)：找出几个数值之间的最大值；random(): 获取随机数。列表函数length($list)：返回一个列表的长度值；nth($list, $n)：返回一个列表中指定的某个标签值join($list1, $list2, $separ

18、ator)：将两个列给连接在一起，变成一个列表；append($list1, $val, $separator)：将某个值放在列表的最后；zip($lists)：将几个列表结合成一个多维的列表；index($list, $value)：返回一个值在列表中的位置值。Introspection 函数type-of($value)：返回一个值的类型；unit($number)：返回一个值的单位；unitless($number)：判断一个值是否带有单位；comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并。Opacity函数alpha($color) /

19、opacity($color)：获取颜色透明度值；rgba($color, $alpha)：改变颜色的透明度值；opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。Sass Maps的函数map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。map-merge($map1,$map2)：将两个 map 合并成一个新的 map。map-remove($map,$

20、key)：从 map 中删除一个 key，返回一个新 map。map-keys($map)：返回 map 中所有的 key。map-values($map)：返回 map 中所有的 value。map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。RGB颜色函数rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；rgba($red,$green,$blue,$alph

21、a)：根据红、绿、蓝和透明度值创建一个颜色；red($color)：从一个颜色中获取其中红色值；green($color)：从一个颜色中获取其中绿色值；blue($color)：从一个颜色中获取其中蓝色值；mix($color-1,$color-2,$weight)：把两种颜色混合在一起。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）的值创建一个颜色；hue($color)：从一个颜色中