1：使用变量 $符号标识变量
变量声明：
eg：
$highlight-color: #F90;
变量引用:
eg：
.selected {
border: 1px solid $highlight-color;
}
注：变量具有作用域，申明在规则块中时，只能在块中使用
变量命名
中划线和下划线分割，两种方式效果相同
eg：
$link-color和$link_color其实指向的是同一个变量
2:嵌套css规则
同一父元素的选择器可把父元素提出来
eg：
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
父选择器的标识符&
群组选择器的嵌套
子组合选择器和同层组合选择器：>、+和~
>直接子元素 +同层相邻元素 ~所有同层元素
嵌套属性
eg：
nav {
border: {
style: solid;
1px;
color: #ccc;
}
}
3导入SASS文件
@import 文件名可省略后缀
使用SASS部分文件
sass局部文件的文件名以下划线开头
默认变量值
!default 用于变量提升，类似于css中的 !important
嵌套导入
原生的CSS导入
不能用sass的@import直接导入一个原始的css文件
4静默注释
/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中
5混合器
混合器使用@mixin标识符定义
通过@include来使用这个混合器
何时使用混合器
你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器
类名是在html文件中应用的，而混合器是在样式表中应用的
混合器中的CSS规则
给混合器传参
跟JavaScript的function很像
默认参数值
6使用选择器继承来精简CSS
@extend何时使用继承
当一个元素拥有的类表明它属于另一个类
继承的高级用法
继承的工作细节
使用继承的最佳实践
官网 https://www.sass.hk/guide