一、使用变量
1、变量的声明和引用：
$light-color:#fff;
border:1px solid $light-color;
声明变量之后，可以直接引用
2、不区分中横线和下划线
和light_color是同一个变量。
二、选择器嵌套规则
3、选择器可以直接嵌套
#content {`
`article {`
• `h1 { color: #333 }`
• `p { margin-bottom: 1.4em }`
`}`
`aside { background-color: #EEE }`
`}
4、父选择器的选择标识符&
article a {`
`color: blue;`
`&:hover { color: red }`
`}
直接在父选择器的基础上添加了hover属性
5、群组，子、兄弟等选择器都可以嵌套
.container h1, .container h2, .container h3 { margin-bottom: .8em }
，
article {`
`~ article { border-top: 1px dashed #ccc }`
`> section { background: #eee }`
`dl > {`
• `dt { color: #333 }`
• `dd { color: #555 }`
`}`
`nav + & { margin-top: 0 }`
`}
6、属性也可以嵌套
nav {`
`border: {`
`style: solid;`
`width: 1px;`
`color: #ccc;`
`}`
`}
三、导入css文件
7、sass局部文件
sass局部文件用下划线（_）开头，
导入局部文件可以不需要后缀，themes/_night-sky.scss
8、默认变量值!default
!important是最高级权限，只要存在就采用这个样式
!default如果对局部文件进行了赋值，则否就使用!default的值
$fancybox-width: 400px !default;
9、嵌套导入
直接在选择器中导入，这样只会局部产生作用
//blue-theme.scss文件
aside {
background: blue;
color: white;
}
.blue-theme {
@import "blue-theme"
}
四、静默注释
在解析成为css之后，不会显示在css文件中，/* */
五、混合器
10、@mixin和@include
用@maxin+命名来定义，用@include+命名来引用
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
11、混合器适用法则
混合器适合用在容易命名的地方，如果一个混合器命名非常直观，用起来不会混淆，这种情况下，使用混合器。
12、混合器的内容
混合器不仅可以包含属性，还可以直接包含选择器
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
如果混合器只包含选择器，那么这个混合器适合在文档的顶部调用，比如清除自带的样式
13、带参数的混合器
混合器也可以带参数，然后用@include给其传参
//混合器
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
//接收
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
六、使用选择器继承来优化精简CSS
13、继承@extend
一个类直接使用另外一个类的样式
如果被继承的对象是比较复杂的，则只会继承这个复杂对象的样式，不会继承它各自的样式
14、继承和混合器的区别
（1）混合器一般不会出现样式层叠的问题；
继承可能会出现样式层叠的问题，这个时候以权重高的为准，如果权重一样，则以最后出现的为准；
继承不会对被继承的对象样式进行改变
（2）继承产生的代码量比混合器产生的代码量要少，因为继承一般是重复选择器，而不是重复样式；
混合器一般是重复样式，产生的代码量多
14、不要用后代选择器去继承
使用后代选择器去继承的时候，会造成选择器的数量失控
.foo .bar { @extend .baz; }
.bip .baz { a: b; }
<!-- 继承可能迅速变复杂 -->
<!-- Case 1 -->
<div class="foo">
<div class="bip">
<div class="bar">...</div>
</div>
</div>
<!-- Case 2 -->
<div class="bip">
<div class="foo">
<div class="bar">...</div>
</div>
</div>
<!-- Case 3 -->
<div class="foo bip">
<div class="bar">...</div>
</div>
\
