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 {
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 {
}
//编译后
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的条理性和可读性的最基本的三个方法：嵌套、导入、注释。
浙公网安备 33010602011771号