sass是什麼？

基本定義

css預處理器，生成文件後綴scss，能夠編譯成css文件，被html引用，但不能替代css。

安裝流程

1. 安裝ruby，並設置環境變量
2. 安裝sass， gem install sass
3. 基本命令行
   (1): 顯示scss文件轉化的css文件： sass t.scss;
   (2): 編譯成對應css文件：sass t.scss t.css;
   (3): 編譯成四種風格中的一種：sass --style compressed t.scss t.css
   (4): 監聽文件或者目錄，自動編譯：sass --watch t.scss:t.css 或者 sass --watch app/t.css:pubic/stylesheet

四種編譯風格

• nested：嵌套縮進的css代碼，它是默認值。
• expanded：沒有縮進的、擴展的css代碼。
• compact：簡潔格式的css代碼。
• compressed：壓縮後的css代碼。

基本語法

$black:#000   //變量定義
border-#{$side}-radius: 5px;  //變量嵌套在字符串中 #{}
right:$argu*.3  //能夠計算
div{a{...}};   //能夠嵌套
p{border:{color:#000}}   //屬性能夠嵌套，須要用冒號
a{&:hover{color:#000}}  //能夠用&引用父元素，
/*!重要註釋，壓縮會保留
*/

複用

1. 繼承 @extend
.class2 {@extend .class1;}
2. Mixin 重用代碼塊
   @minxin 定義
   @include 調用

@minxin keymap($value: 10px){  //能夠指定參數和缺省
    left：$value
}
div{
   @include keymap
}
//實例，用來生成瀏覽器前綴
@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $radius;
　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
　　}

插入文件

@import 等同於css的 @import 命令

顏色函數

• lighten(#cc3, 10%) // #d6d65c
• darken(#cc3, 10%) // #a3a329
• grayscale(#cc3) // #808080
• complement(#cc3) // #33c

高級用法，添加函數寫法

函數保留字須要加上@：@for
能夠自定義函數

@function pow($x,$y){
  @if($x>$y){
    @for $i from 0 through 1{
      $x : 1;
    }
  }@else{
    $y:1;
  }
  @return $x+$y;
}
$res:pow(1,0)+px;
div{
  @if(true){
    font-size:$res;
  }@else{
    font-size: 10px;
  }
}

//編譯結果
div {
  font-size: 1px; }

附錄連接

1. sass在線轉化器
2. sass中文入門教程
3. sass參考手冊
4. sass官網語法（英文）
5. 阮一峯sass解讀-參考