变量声明($)

$highlight-color: #F90;{ }规则块内定义，只能在{}规则块内使用$link-color和$link_color指向的是同一个变量

嵌套CSS 规则(&)

&:hover { color: red }

群组选择器的嵌套

.container {  h1, h2, 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 }}

嵌套属性

nav {  border: {  style: solid;  width: 1px;  color: #ccc;  }}

导入SASS文件(@import)

@import"sidebar";_night-sky.scss  #局部文件的文件名以下划线开头，不会在编译时单独编译这个文件输出css@import "themes/night-sky";

默认变量值(!default)

$fancybox-width: 400px !default;

嵌套导入(@import)

.blue-theme {@import "blue-theme"}

静默注释

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

混合器(@mixin)

@mixin rounded-corners {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;}notice {  border: 2px solid #00aa00;  @include rounded-corners;}@mixin no-bullets {  list-style: none;  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);}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; }}

使用选择器继承来精简CSS(@extend)

.error {  border: 1px red;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}.error a{  //应用到.seriousError a  color: red;  font-weight: 100;}h1.error { //应用到hl.seriousError  font-size: 1.2rem;}

@mixin

@mixin awesome {    width: 100%;    height: 100%;}body {    @include awesome;}p {    @include awesome;}

@mixin awesome($w: 100%, $h: 100%) {    width: $w;    height: $h;}body {    @include awesome(960px);}p {    @include awesome;}

@mixin radius($radius){    border-radius: $radius;}.navigation {    @include radius(10px);}.content {    @include radius(32px);}

@extend

.awesome {    width: 100%;    height: 100%;}body {    @extend .awesome;}p {    @extend .awesome;}/*.awesome, body, p {    width: 100%;    height: 100%;}*/

占位符(%)

%awesome {    width: 100%;    height: 100%;}body {    @extend %awesome;}p {    @extend %awesome;}/*body, p {    width: 100%;    height: 100%;}*/