SASS經常使用方法

cnpm install --save-dev sass-loader  
//sass-loader依賴於node-sass 
cnpm install --save-dev node-sass

//實現BEM的模式
.block { color: red; 
@at-root #{&}-green{ 
    color: green; 
} 

//繼承
.row {
  @extend .fn-clearfix;
}

//循環
@for $i from 1 to 12{
  .t#{$i} {
    top: ($lh*$i);
  }
}

/*柵格*/
$gridColumns: 12 !default;
$gridGutter: 20px !default;
.row {
  margin-right: -$gridGutter / 2;
  margin-left: -$gridGutter / 2;
  @extend .fn-clearfix;
}
%col{
  float:left; min-height: 1px;padding-left:$gridGutter / 2; padding-right:$gridGutter / 2;
}

@for $i from 1 through  12 {//to 不包含12
  .col-md-#{$i} {
    @extend %col;
    float: left;
    width: $i/$gridColumns*100%;
  }
}

$file-types:doc pdf txt xls rar mp4;
@each $type in $file-types{
    .#{$type}{
        background-image:  url(/static/images/#{$type}.png);
    }
}