SASS详解
简述
SASS是一种CSS扩展语言，可以将SASS编译成css代码，使用sass能令CSS代码的编写过程更加便捷和模块化。
sass的本质可以说就是进一步模块化css，减少编写重复的css代码
sass的中文官网：https://www.sass.hk/
使用变量
在sass中我们可以把反复使用的css属性定义成变量，然后通过变量名去引用他们，从而不用重复书写这个属性值。
使用$符号定义变量
$变量名: 属性值;
变量的作用域也分为块外和块内，块内定义的变量只能供本块使用，而块外能供所有地方使用
定义变量的时候也能够引用之前定义过的变量，例如：
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
在sass变量名中的中划线和下划线是等同的，不做区分
嵌套CSS规则
普通嵌套
我们在写css代码的时候，写选择器的时候是很麻烦的，例如：
#content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }
可以看到写后代选择器的时候，content等父容器要写很多遍
而sass提供了一种嵌套式写法，只需写一次且可读性更高
#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } }
可以看到我们可以随心所欲地定义父容器或者它子容器的样式，不用一个个地重复写选择器
这种基于后代选择器的嵌套写法有时候也会有点点问题
伪类选择器
当我们使用到伪类选择器的时候
article a { color: blue; :hover { color: red } }
编译后的css代码是这样子的
article a { color: blue; } article a :hover { color: red; }
注意a后面有空格，也就是说嵌套的写法默认会使用后代选择器拼接空格，但这里我们想要写成a:hover
这时候sass就提供了&给我们使用，&代表的是我们父类的选择器，这里的&代表的就是article a，我们可以把sass代码写成这样
article a { color: blue; &:hover { color: red } }
这样编译后的css代码就没有问题了
群组选择器
在css中当我们使用后代选择器和逗号为多个容器添加样式时，容器的代码要写很多遍
.container h1, .container h2, .container h3 { margin-bottom: .8em }
在sass中也支持嵌套
.container { h1, h2, h3 {margin-bottom: .8em} }
css属性的嵌套
对于一些css的属性名，例如border-什么什么，一遍遍重复写挺烦人的，sass能够让我们用嵌套的形式偷懒
nav { border: { style: solid; width: 1px; color: #ccc; } }
像这里sass会将style、width等子属性通过-和border连接起来，达到偷懒的目的
SASS文件的导入
sass可以通过@import的形式导入其他sass文件，达到模块化的效果
局部文件
那些专门供别的sass文件import的文件被称为局部文件，sass有个特殊的约定为这些文件命名
那就是以下划线开头，在引入的时候还可以省略下划线
举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";
默认变量值
在sass中，一般情况下你反复声明一个变量，只有最后一处定义会生效
如果在写sass文件的时候希望用户可以定制你的sass文件，在引入前声明了一些变量
引入后你的sass文件会更改这些变量的值，如果我们希望这些变量使用上一次声明的值
我们就要用到!default标签，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$fancybox-width: 400px !default;
像这样声明一个默认变量值，就代表这个变量默认值是400px，如果在导入前声明了就按导入前的值
嵌套导入
sass允许@import命令写在css规则内，像这样
.blue-theme {@import "blue-theme"}
blue-theme文件里的sass代码会直接嵌套到.blue-theme选择器里
混合器mixin
我们可以用@mixin标识符定义一大段的css样式，然后在不同地方用@include重复复用它，例如
@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
然后需要的地方用@include命令
notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; }
混合器传参
混合器支持像函数一样进行参数传递，来达到模块定制的功能
@mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
我们在@include的时候可以将实际的参数传进混合器，以生成不同需求的代码
混合器参数的默认值
在混合器定义的时候可以以键值对的形式定义参数的默认值，或者是其他参数的引用
@mixin link-colors( $normal, $hover: blue, $visited: $normal ) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
sass的注释
sass提供了不同于css代码/**/的注释形式，即静默注释//，其内容不会出现在生成的css文件中。
在编译的时候注释不会生成到css代码里
Reference
https://www.sass.hk/guide/
