1、sass安装 因为sass是基于ruby写的，所以首先必须安装ruby。去ruby官网下载安装ruby安装包，在安装过程中，勾选上添加到环境变量，这样可以在安装的时候自动将安装路径添加到环境变量中。 ruby安装成功后，安装sass，在命令行中输入“gem install sass”进行安装。、 2、sass的编译 sass有两种后缀名，一种是以“.sass”结尾的，另一种是以“.scss”结尾的，一般情况下，都是用后者。 将写好的scss文件进行编译，编译方法：可以在命令行中项目目录下输入“sass input.scss output.css ”. 还能实现实时自动编译：“sass --watch inpyt.scss:output.css” 我用的是webstorm编写软件，webstorm是支持sass编译的，用webstorm安装sass的方法可百度，很简单。
3、sass变量 “$”:用来声明变量，例如$blue:blue; 变量可以直接使用，如：“div{color:$blue;}”，编译过后----div{color : blue;} 变量也是有作用域的，分为全局作用域和局部作用域；如下： $blue:blue; //全局变量 div{ $blue:blue; //局部变量 color:$blue; } 局部变量只在那一块中起作用，不影响全局变量的定义。 也可以将局部变量转换为全局变量，使用“!global”；如div{$blue:red !global; color:$blue;} a{ color: $blue; } 在sass中，变量名的定义既可以使用中划线也可以使用下划线，这两者是互通的，意思就是说，在变量定义的时候使用的是中划线，在引用变量的时候可以使用下划线，即将中划线替换成下划线。 4、嵌套css规则 使用sass可以进行样式的嵌套，使用css，有时候会要重复写很多代码，使用sass嵌套则可以减少很多代码量。例子如下： #content {
article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { #EEE } } /* 编译后 */ #content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { 父选择器的标识符& 在sass中，对于简单的嵌套是没问题的，但如果涉及到父选择器中使用伪类的话，简单的嵌套就行不通了，所以现在有个标识符“&” 可以解决这个问题。例如： article a{ color：blue ; &:hover:red; } //编译过后 article a { color: blue } article a:hover { color: red } 6、群组选择器的嵌套 像 .button button会命中button元素和类名为.button的元素，这种选择器叫做群组选择器。群组选择器的规则会对群组中任何一个选择器的元素生效。例子如下所示： .container { } //编译后 .container h1, .container h2, .container h3 { margin-bottom: .8em } 也可以是： nav, aside {
a {color: blue} } //编译后 nav a, aside a {color: blue} 7、子组合选择器和同层组合选择器：>、+和~； 这仨个选择器必须配合其他的选择器一起使用，以制定浏览器仅选择某种特定的上下文中的元素。 “>”选择器 ：选择一个元素的直接子元素。 “+”选择器：同层相邻组合选择器，即与一个元素相邻的同一级的兄弟元素。 “~”选择器：同层全体组合选择器，即与一个元素处于同一级别的所有元素。 各选择器的用法如下所示： article { ~ article { border-top: 1px dashed #ccc } > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 } } //编译后 article ~ article { border-top: 1px dashed #ccc } article > section{ background: #eee } article dl > dt { color: #333 } article dl > dd { color: #555 } nav + article { margin-top: 0 } 8、属性嵌套 在sass中，除了选择器的嵌套之外，还可以进行属性的嵌套。 属性嵌套的规则是：将属性名从中划线的地方断开，在根属性的后边添加一个冒号：，紧跟一个{}块，然后把子属性的部分写在{}中，例子如下所示; nav { border: { style: solid; width: 1px; color: #ccc; } } //编译后 nav { border-style: solid; border-width: 1px; border-color: #ccc;} 属性和选择器的嵌套是非常大的特性，它不仅减少了代码的编写量，而且通过视觉上的缩进使自己编写的样式结构更加清晰，更易于阅读和开发。 9、 导入sass文件 在一个大型的项目中，必定会存在大量的css样式，将这所有的样式放在一起，看起来不美观，所以需要将这些样式拆分到多个文件中，sass可以实现这个功能，通过@import规则进行样式文件的引进。css也有这个规则，只有执行该规则的时候，浏览器才会去下载其他的css文件，这会导致页面在加载的时候会很慢。 为@import命令专门编写的sass文件，不会生成对应的css文件，这样的sass文件被称为局部文件。 sass局部文件一般是以下划线开头，当@import一个局部文件时，不需要将文件的下划线写入，只需要将下划线之后的名字导入即可。 9.1 默认变量值 sass中可以使用!default标签来实现这个目的。 9.2 嵌套导入 和原生的css不同，sass允许@import命令直接写在css规则内。例子如下： 这是一个名为_blue-theme.scss的局部文件 aside { background: blue; color: white;
} 把该文件导入到一个css规则内，如下所示： .blue-theme {@import "blue-theme"} //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。 .blue-theme { aside { background: blue; color: #fff; } } 9.3 原生的css导入 以下三种情况，在sass中使用@import命令，导入的时候，也会造成浏览器的额外下载。影响加载速度。 1.被导入的文件名以.css结尾； 2.被导入的文件名是一个URL地址（例如：http://www.sass.hk/css/css/css）； 3.被导入的文件名是css的url()值。 9.4 静默注释 sass提供了一种不同于css标准注释格式/*.....*/的注释语法，即静默注释3，其注释内容不会出现在生成的css文件中；sass有两种注释方法： 1. /....../ :这种注释方法的注释内容不会出现在相对应生成的css文件中 2./*......*/: 这种注释方法的注释内容会出现在相对应生成的css文件中 但是当注释出现在不该出现的地方，如css属性或选择器中，这些注释也会被抹掉，如下： body { color /* 这块注释内容不会出现在生成的css中 */: #333; padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0 } 保持sass的条理性和可读性的最基本的三个方法：嵌套、导入、注释。