一、使用变量

• 变量声明、变量引用

$highlight-color: #f90

.selected{ border: 1px solid $highlight-color;}// 编译后/* .selected{ border: 1px solid #f90;} */

• 变量名用中划线或下划线分隔皆可。

　　　　即$highlight-color和$highlight_color皆可。变量声明中用中划线，变量引用中用下划线也可以如常引用。

二、嵌套CSS规则

SCSS写法：（像俄罗斯套娃一样，层层嵌套）

#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 }

• 父选择器的标识符&

article a { color: blue; &:hover { color: red }
}

编译后

article a { color: blue }article a:hover { color: red }

• 群组选择器的嵌套

.container { h1, h2, h3 {margin-bottom: .8em}}

编译后：

.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 }}

编译后：

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 }

• 属性嵌套

nav { border: 1px solid #ccc { left: 0px; right: 0px; }}

这比下边这种同等样式的写法要好：

nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px;}

三、导入SASS文件

使用@import规则导入，如：@import "colors"   (colors.scss的.scss后缀可以省略)

• 使用SASS部分文件：你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import"themes/night-sky";
• 默认变量值：一般情况下，反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
• 嵌套导入：

.blue-theme {@import "blue-theme"}//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。.blue-theme { aside { background: blue; color: #fff; }}