$nav-color: #F90;
nav {$width: 100px;width: $width;color: $nav-color;
}//编译后nav {width: 100px;color: #F90;
}

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

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

如：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }sass：
#content {article {h1 { color: #333 }p { margin-bottom: 1.4em }}aside { background-color: #EEE }
}

错误写法：
article a {color: blue;:hover { color: red }
}正确写法：
article a {color: blue;&:hover { color: red }
}

如：
.container h1, .container h2, .container h3 { margin-bottom: .8em }处理方式为：
.container {h1, h2, h3 {margin-bottom: .8em}
}又如：
nav, aside {a {color: blue}
}

如：
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 }处理方式为：
article {~ article { border-top: 1px dashed #ccc }> section { background: #eee }dl > {dt { color: #333 }dd { color: #555 }}nav + & { margin-top: 0 }
}

如：
nav {border-style: solid;border-width: 1px;border-color: #ccc;
}
处理为：
nav {border: {style: solid;width: 1px;color: #ccc;}
}又如：
nav {border: 1px solid #ccc;border-left: 0px;border-right: 0px;
}
处理为：
nav {border: 1px solid #ccc {left: 0px;right: 0px;  }
}

一般，重复声明变量会被覆盖，如：
$link-color: blue;
$link-color: red;
a {color: $link-color;
}特别是你的sass文件库在他人import时，他人可能想修改某些值的情况下，sass提供类似！import标签的对立面，即：如果这个变量被重新声明赋值了，那就用它的声明的值，否则就用这个默认值。
处理为：
$fancybox-width: 400px !default;
.fancybox {width: $fancybox-width;
}
在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

如，一个名为_blue-theme.scss的局部文件，内容如下：
aside {background: blue;color: white;
}
然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import "blue-theme"}//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。.blue-theme {aside {background: blue;color: #fff;}
}
被导入的局部文件中定义的所有变量和混合器，也会在这个规则范围内生效。
好处：这些变量和混合器不会全局有效，这样我们就可以通过嵌套导入只对站点中某一特定区域运用某种颜色主题或其他通过变量配置的样式。

body {color: #333; // 这种注释内容不会出现在生成的css文件中padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}body {color /* 这块注释内容不会出现在生成的css中 */: #333;padding: 1; /* 这块注释内容也不会出现在生成的css中 */ 0;
}

混合器使用@mixin标识符定义。先写一个混合器：
@mixin rounded-corners {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}通过@include来使用这个混合器
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;
}

如下一个包含css规则的名为no-bullets的混合器：
@mixin no-bullets {list-style: none;li {list-style-image: none;list-style-type: none;margin-left: 0px;}
}使用：
ul.plain {color: #444;@include no-bullets;
}等价于：
ul.plain {color: #444;list-style: none;
}
ul.plain li {list-style-image: none;list-style-type: none;margin-left: 0px;
}

// 如：
@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; }
}

//通过选择器继承继承样式
.error {border: 1px solid red;background-color: #fdd;
}
.seriousError {@extend .error;border-width: 3px;
}

//.seriousError从.error继承样式
.error a{  //应用到.seriousError acolor: red;font-weight: 100;
}
h1.error { //应用到hl.seriousErrorfont-size: 1.2rem;
}