Sass入门

Sass是css的一种预编译器，Sass能够简化很多css代码，让css代码看起来简洁，好看。

1.变量申明和使用
sass的变量申明是以$开头的，和css的申明变量差不多。
如：

变量bg-Color的值就为red。
使用变量的时候只要直接调用变量就好。

这样color和background-color的值都为red。

2.变量名用中划线还是下划线分隔
这个问题，在官网的解释就是：随你的便。
怎么说呢，就算你写$bg-color定义变量，然后引用的时候写$bg_color也能正常使用。

3.嵌套CSS 规则。

上边的例子，会在输出css时把它转换成跟你之前看到的一样的效果。这个过程中，sass用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。
3.1.父选择器的标识符&
有一常见的情况，如给a标签添加:hover伪类选择器，当你这样写时:

nav下a标签的所有子元素被hover时，字体颜色都会变红。
这时候，有个标识符就可以解决这个问题，如：

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换，编译后会变成：

3.2.群组选择器的嵌套
在模块化开发开发过程中，css样式会遇到很多这种情况，每一模块的样式都要用该模块的最外层类名包裹，这样可以防止样式冲突。
这时候css文件里就会出现一大串样式名：

这时候sass嵌套的优势就体现出来：

3.3.子组合选择器和同层组合选择器：>、+和~
其实它就是沿用css的规则：

编译后就变成：

3.4嵌套属性
嵌套属性就是属性也支持嵌套。如:

编译后：

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。
4.导入SASS文件
这个功能我感觉特别有用。官网的原话是这样的：
css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。
5. 静默注释
最直接上代码

6.混合器
混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框：

后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。