1、通过$声明变量
$highlight-color: #F90;
$basic-border: 1px solid black;
注意:变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。
用中划线声明的变量可以使用下划线的方式引用，反之亦然。
2、css样式嵌套
#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE }}复制代码 /* 编译后 */#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }复制代码 2/1、父选择器标识符&
#content aside { color: red; body.ie & { color: green }}复制代码 /*编译后*/#content aside {color: red};body.ie #content aside { color: green 复制代码 2/2、
.container { h1, h2, h3 {margin-bottom: .8em}}.container h1, .container h2, .container h3 { margin-bottom: .8em }复制代码 2/3、
article { ~ article { border-top: 1px dashed #ccc } > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 }}复制代码 sass会如你所愿地将这些嵌套规则一一解开组合在一起：
article ~ article { border-top: 1px dashed #ccc }article > footer { background: #eee }article dl > dt { color: #333 }article dl > dd { color: #555 }nav + article { margin-top: 0 }复制代码 2/4、嵌套
nav { border: { style: solid; width: 1px; color: #ccc; }}复制代码 嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样：
nav { border-style: solid; border-width: 1px; border-color: #ccc;}复制代码 nav { border: 1px solid #ccc { left: 0px; right: 0px; }}复制代码 这比下边这种同等样式的写法要好：
nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px;}复制代码 3、导入.scss/.sass文件
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀
sass局部文件的文件名以下划线开头、只把这个文件用作导入
当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线
3/1、默认变量值 !default
$fancybox-width: 400px !default;.fancybox {width: $fancybox-width;}复制代码 1）如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。
2）如果用户没有做这样的声明，则$fancybox-width将默认为400px
3/2、嵌套导入
aside { background: blue; color: white;}复制代码 然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。.blue-theme { aside { background: blue; color: #fff; }}复制代码 4、静默注释 //
内容不会出现在生成的css文件中
body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */}复制代码 5、定义重用样式块（混合器）
@include调用会把混合器中的所有样式提取出来放在@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;}//sass最终生成：复制代码 .notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}复制代码 5/1、混合器传参
@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; }复制代码 不关注顺序a { @include link-colors( $normal: blue, $visited: green, $hover: red );}复制代码 5/2、默认参数
@mixin link-colors( $normal, $hover: $normal, $visited: $normal ){ color: $normal; &:hover { color: $hover; } &:visited { color: $visited; }}复制代码 6、继承@extend
.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:
当一个元素拥有的类（比如说.seriousError）表明它属于另一个类（比如说.error），这时使用继承再合适不过了
.disabled { color: gray; @extend a;}复制代码