本文共 1690 字，大约阅读时间需要 5 分钟。

1、 声明变量

$width:80px.nav{   width:$width}//变量引用其他变量$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected {  border: $highlight-border;}

2、子组合选择器和同层组合选择器：>、+和~;

header + p { font-size: 1.1em }在下例中，你可以用同层相邻组合选择器+选择header元素后紧跟的p元素：article ~ article { border-top: 1px dashed #ccc }你也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：

3、导入css样式

sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

3-4. 原生的CSS导入;

由于sass兼容原生的css，所以它也支持原生的CSS@import。尽管通常在sass中使用@import时，sass会尝试找到对应的sass文件并导入进来，但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。

4、静默注释

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末

5、混合器

@mixin rowFlex {		display: flex;		// align-items: center;		justify-content: center;			}.nav{    @clude rowFlex}//给混合器传参数@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  );}//默认参数@mixin link-colors(    $normal,    $hover: $normal,    $visited: $normal  ){  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}

6、使用选择器继承来精简CSS 

.error {  border: 1px solid red;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}

转载地址：http://lemsi.baihongyu.com/