scss（part1）

sass预处理技术

Sass在css的基础上增加了变量、嵌套、混合、导入等高级功能，这些拓展令css更加强大与优雅，使用Sass以及Sass的样式哭有助于更好的组织管理样式文件，以及更高效地开发项目。

特色功能

• 完全兼容CSS3

• 在CSS基础上增加变量、嵌套、混合、导入

• 通过函数进行颜色值与属性值的运算

• 通过控制指令（if、for、each等）高级功能

• 自定义输出格式

语法格式

Sass有两种语法格式：SASS和SCSS

变量引用

凡事css属性的标准值(比如说1px或者bold)可存在的地方，变量就可以使用

中划线还是下划线

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线

取决于个人喜好

父选择器标识符&

一般情况下 sass在解开一个嵌套规则时就会把父选择器 通过一个空格连接子原则起的前边形成 后代选择器

最常见的一种情况是当你为链接添加 ：hover时

article a {
 color:blue
:hover {
color:red
}
}

这是不对的

article a {
 color:blue
&:hover {
color:red
}
}

&将会被父选择器直接替换

群组选择器的嵌套

css中使用h1,h2,h3 群组选择器

#content h1,#content h2,#content h3 {
 color:red;
}

scss可以使用

#content {
 h1,h2,h3 {
color:red;
}
}

sass文件的导入

sass也有一个@improt规则,但不同的是，sass的@impory在生成css文件时就把县官文件导入进来，这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求

使用@import规则兵书需要指明被导入文件的全名。你可以省略.scss