1. 嵌套选择器
            
            
              css
              
              
            
          
          #content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}编译后
            
            
              css
              
              
            
          
          #content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }2. 变量声明和使用
            
            
              css
              
              
            
          
          $width: 100px;
$height: 100px;
$bg-red: #ff4040;
.box{
    width: $width;
    height: $height;
    background: $bg-red;
}编译后
            
            
              css
              
              
            
          
          .box{
  width: 100px;
  height: 100px;
  background: #ff4040;
}3. 父选择器标识符&
            
            
              css
              
              
            
          
          article a {
  color: blue;
  &:hover { color: red }
}编译后
            
            
              css
              
              
            
          
          article a { color: blue }
article a:hover { color: red }4. 嵌套属性
            
            
              css
              
              
            
          
          nav {
  border: {
    style: solid;
    width: 1px;
    color: #000;
  }
}编译后
            
            
              css
              
              
            
          
          nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}5. 混合器(整合重复代码)
- @mixin 定义混合器
- @include 使用混合器
- 定义混合器
            
            
              css
              
              
            
          
          @mixin box-style {
  width: 100px;
  height: 100px;
}- 使用混合器
            
            
              css
              
              
            
          
          .box1{
  background: cyan;
  @include box-style;
}
.box2{
  background: #ff4040;
  @include box-style;
}编译后
            
            
              css
              
              
            
          
          .box1{
  background: cyan;
  width: 100px;
  height: 100px;
}
.box2{
  background: #ff4040;
  width: 100px;
  height: 100px;
}6. 给混合器传参
- @mixin接收参数使用 @include传参,这种方式跟JavaScript的function很像
- 定义混合器
            
            
              css
              
              
            
          
          @mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}- 使用混合器并传参进去
            
            
              css
              
              
            
          
          a {
  @include link-colors(blue, red, green);
}编译后
            
            
              css
              
              
            
          
          a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }7. @for
用法1:through
条件范围包含 start 与 end 的值 @for $var from <start> through <end>
            
            
              css
              
              
            
          
          @for $i from 1 through 3 {
  .w-#{$i * 100} { width: 100px * $i; }
}编译后
            
            
              css
              
              
            
          
          .w-100 {
  width: 100px;}
.w-200 {
  width: 200px;}
.w-300 {
  width: 300px;}用法2:to
条件范围只包含 start 的值不包含 end 的值 @for $var from <start> to <end>
            
            
              css
              
              
            
          
          @for $i from 1 to 3 {
  .w-#{$i * 100} { width: 100px * $i; }
}编译后
            
            
              css
              
              
            
          
          .w-100 {
  width: 100px;}
.w-200 {
  width: 200px;}