1. Sass 是 CSS 的擴充套件語言。允許使用變數，嵌入規則以及更多的語法使CSS更加的強大，更易於組織，執行速度更快，css的預編譯語言。

2. Sass的一種語法也叫做Scss

3.Sass的預處理：瀏覽器是不識別sass的，在此之前我們應該採用一些工具來對sass進行編譯

（1）koala （2）Ruby外掛和webstorm （3）gulp構建工具

4.Ruby的安裝環境（一不下一步，不要安裝在中文的名稱檔案下）

5. 定義變數：

$fontsize: 20px;

巢狀定義：

.box {

    padding-left: 10px;

    .pic {

        padding: 10px;

    }

}
 

匯入：

@import "commont" (引號中是路徑)

mixin（類似於函式的呼叫）：

定義

@mixin font($family, $size, $weight) {

font-family:$family;

font-size: $size;

font-weight: $weight;

}

unixcode編碼（字型中文要改成Unixcode碼： \SFAE\8F6F\96C5\9ED1）

a {
 @include font('微軟雅黑'， 30px；bold)
}

擴充套件(使用已經定義好的樣式，但還需要修改和增加一些樣式時使用)：

.message {
 width:100px;
 height: 100px;
 background:#145615;
 color: #f00;
 border-radius: 5px;
}
.warning-message {
 @extend .message;
 background: yellow;
}

函式（傳入PX返回REM）：

$count: 10;

$designWidth: 640px;

@function pxtorem ($px) {

 @return $px * $count / $designWidth * 1rem;

}

div {

 width: pxtorem(100px);

}
 

表示式（支援加減乘除）：

for迴圈：

@for $i from 1 through 72 {

    .box div:nth-of-type(#{$i}) {

    }

}

if語句：

$someEvent: true;

@if $someEvent {

 p{

  color:#ccc;

  background: black;

 }

}@else{

 p{

  background:red;

  color:black;

 }
}