1. SASS簡介

學過CSS的人都知道，它不是一種程式語言，你可以用它開發網頁樣式，但是沒法用它程式設計。也就是說，CSS基本上是設計師的工具，不是程式設計師的工具。在程式設計師眼裡，CSS是一件很麻煩的東西。它沒有變數，也沒有條件語句，只是一行行單純的描述，寫起來相當費事

很自然地，有人就開始為CSS加入程式設計元素，這被叫做"（css preprocessor）。它的基本思想是，用一種專門的程式語言，進行網頁樣式設計，然後再編譯成正常的CSS檔案，其中SASS就是其中一種。

什麼是SASS/LESS：SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS

直白的說就是：css可以打破常規的編寫方式，類似程式語言一樣，可以用變數、計算、巢狀、程式碼繼承（即程式碼複用）、還可以插入檔案等方式編寫css樣式，但最後需要用到sass將其編譯後生產css檔案後使用。

2. 安裝ruby

3.安裝sass

3.1 安裝完ruby之後，在開始選單中，找到剛才我們安裝的ruby，開啟Start Command Prompt with Ruby

3.2. 使用命令列 (由於國外網路問題，這裡需要使用淘寶映象)

3.2.1, 首先移除掉rubygems.org

gem sources --removehttps://rubygems.org/

3.2.2, 然後換用 ruby-china映象服務

gem sources -ahttp://gems.ruby-china.org/

3.2.3, 安裝好後檢查當前SOURCES列表：

gem sources -l

3.2.4, ruby映象跟換後,現在來安裝sass

gem install sass

3.2.5, 安裝成功後,可檢視sass是否已經安裝好,

sass -v

3.2.6, sass的其他命令

更新sass gem update sass

檢視sass幫助sass -h

4. 使用sass

4.1， SASS編譯

專案中的樣式檔案用.scss檔案編寫，並按照sass語法，然後用sass將scss檔案編譯成css檔案，再將編譯後的css檔案匯入專案中

檢視sass檔案的內容sass test.scss

編譯成css檔案sass test.scss test.css

4.2， SASS提供四個編譯風格的選項

* nested：巢狀縮排的css程式碼，它是預設值。

* expanded：沒有縮排的、擴充套件的css程式碼。

* compact：簡潔格式的css程式碼。

* compressed：壓縮後的css程式碼。

常用： sass --style compact test.sass test.css

4.3， SASS監聽檔案或目錄，一旦原始檔有變動，就自動生成編譯後的版本.

監聽檔案sass --watch input.scss:output.css

監聽資料夾sass --watch app/sass:public/stylesheets

5. Sass基本語法

5.1，變數

SASS允許使用變數，所有變數以$開頭

如果變數需要鑲嵌在字串之中，就必須需要寫在#{}之中

5.2，計算功能

SASS允許在程式碼中使用算式：

5.3，巢狀

SASS允許選擇器巢狀

屬性也可以巢狀，比如border-color屬性

可以使用&引用父元素。比如a:hover偽類

//定義變數
$width: 200px;
$left: left;
div {
    width: $width;
    //計算
   height: $width + 200px;
    background: red;
    //巢狀
   ul {
        border: {
            width: 5px;
            style: dashed;
            color: purple;
        };
        border-#{$left}: 3px solid blue;
    }
    &:hover {
        background: orange;
    }
}

5.4，程式碼重用-繼承

SASS允許一個選擇器，繼承另一個選擇器，使用@extend。

//繼承
.class1 {
    width: 200px;
    height: 200px;
}
div {
    @extend .class1;
    background: red;
}

5.5，程式碼重用[email protected]

使用@mixin命令，定義一個程式碼塊。

使用@include命令，呼叫這個mixin

//混合
@mixin a {
    width: 200px;
    height: 200px;
}
div {
    @include a;
    background: red;
}
//帶參混合
@mixin a($w:200px){
    width: $w;
    height: 200px;
}
div {
    @include a(300px);
    background: red;
}

5.6，註釋

SASS共有兩種註釋風格。

標準的CSS註釋 /* comment */，會保留到編譯後的檔案。

單行註釋 // comment，只保留在SASS原始檔中，編譯後被省略。

在/*後面加一個感嘆號，表示這是"重要註釋"。即使是壓縮模式編譯，也會保留這行註釋，通常可以用於宣告版權資訊

/*!
　　　　重要註釋！
　　  */

5.7，插入檔案

@import命令，用來插入外部檔案scss或css。