sass是css的預處理器，它提供了許多便利的寫法方法

可以使用變數，常量，巢狀，函式，混合，繼承等功能，讓css的開發變得更加簡單可維護。

直接寫出來的sass檔案其實就是普通的文字檔案，以.sass或.scss作為檔案字尾名。

裡面可以直接使用css語法以及sass特有的語法特性，完成後通常需要經過編譯成合法的css檔案以供瀏覽器使用。

sass的安裝

sass基於Ruby語言開發而成，因此安裝sass前需要安裝Ruby。

安裝完成後需測試安裝有沒有成功,執行CMD輸入以下命令：

ruby -v

如安裝成功會列印

ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

Ruby自帶一個叫做RubyGems的系統，用來安裝基於Ruby的軟體。我們可以使用這個系統來 輕鬆地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你需要輸入下面的命令：

安裝如下(如mac安裝遇到許可權問題需加 sudo gem install sass)

gem install sass

gem install compass

在每一個安裝過程中，你都會看到如下輸出：

Fetching: sass-3.x.x.gem (100%)

Successfully installed sass-3.x.x

Parsing documentation for sass-3.x.x

Installing ri documentation for sass-3.x.x

Done installing documentation for sass after 6 secon

1 gem installed

安裝完成之後，你應該透過執行下面的命令來確認應用已經正確地安裝到了電腦中：

sass -v

Sass 3.x.x (Selective Steve)

compass -v

Compass 1.x.x (Polaris)

Copyright (c) 2008-2015 Chris Eppstein

Released under the MIT License.

Compass is charityware.

Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

sass的編譯

1.命令列編譯;

//單檔案轉換命令

sass input.scss output.css

//單檔案監聽命令

sass --watch input.scss:output.css

//如果你有很多的sass檔案的目錄，你也可以告訴sass監聽整個目錄：

sass --watch app/sass:public/stylesheets

2.編譯工具Koala

3.使用vscode中的Live Sass Compiler外掛來實現scss檔案的實時編譯

變數

Sass 讓人們受益的一個重要特性就是它為 CSS 引入了變數。你可以把反覆使用的 CSS 屬性值 定義成變數，然後透過變數名來引用它們，而無需重複書寫這一屬性值。

變數的定義是以$符號開頭，加上變數名，比如：

$text-warning: red;

$border-radius: 5px;

.tip {

color: $text-warning;

border: 1px solid $border-radius;

}

變數也可以透過加減乘除等運算子號進行計算，比如：

$font-base: 10px;

.article {

font-size: $font-base * 2 - 4px;

border-width: $font-base / 10;

}

變數的注意事項

變數需要提前宣告才能使用，因為編譯是從上往下進行的，如果在還未宣告變數的地方使用，會找不到這個變數。

變數都是全域性變數，如果在大括號內部定義的變數則屬於區域性變數。

巢狀

通常所用到的選擇器巢狀是這樣的，將新的選擇器放到父級選擇器當中，並且可以無限多級巢狀。

繼承

如果存在兩個class，他們有一些不同但又有許多相似之處，以前的做法可能是把所有樣式重複宣告兩次。但是有sass之後更好的做法是建立一個基礎的class，然後在第二個class中用@extend繼承它，同時還可以新增一些額外的樣式，或者對某些樣式進行重寫。比如我們之前學過bootstrap的按鈕的構建思想，是對基礎樣式進行附加和重寫，而現在想要定義自己的樣式時就可以很方便地進行這一操作了。首先宣告一個標準樣式的class，然後繼承這個樣式，然後設定不同的主題色：

混合

當出現大段大段重用樣式程式碼時，獨立的變數就難以應付，這個時候可以透過sass的混合器@mixin 和 @include 實現大段樣式的重用。在定義mixin時，需要在前面新增@符號，使用時需要用@include來引用該@mixin：

匯入

匯入規則可以從外部檔案匯入mixin混合器等等。在sass中有一個命名慣例，被匯入的樣式檔名用下劃線做字首。匯入的語法是@import “xxx”，這裡的xxx不需要帶檔案字尾和下劃線字首。也就是說匯入“_style.sass”或者“_style.scss”的時候，只需要寫@import “style”就可以了：

1.為什麼要使用SASS？

它是預處理語言，它為CSS提供縮排語法（它自己的語法）。

它允許更有效地編寫程式碼和易於維護。

它是包含CSS的所有功能的CSS的超集，是一個開源的預處理器，以 Ruby 編碼。

它提供了比平面CSS好的結構格式的文件樣式。

它使用可重複使用的方法，邏輯語句和一些內建函式，如顏色操作，數學和引數列表。

2.列出SASS的一些功能？

它是更穩定，強大，與CSS的版本相容。

它是超集的CSS和基於JavaScript。

它被稱為CSS的語法糖，這意味著它使使用者更容易閱讀或表達的東西更清楚。

它使用自己的語法並編譯為可讀的CSS。

你可以在更少的時間內輕鬆地編寫CSS程式碼。

它是一個開源的預處理器，被解釋為CSS。

3.SASS的優點是什麼？

它允許在程式設計結構中編寫乾淨的CSS。

它有助於編寫CSS更快。

它是CSS的超集，幫助設計師和開發人員更有效率和快速地工作。

由於Sass相容所有版本的CSS，我們可以使用任何可用的CSS庫。

可以使用巢狀語法和有用的函式，如顏色操作，數學和其他值。

Saas（軟體服務化Software as a Service)

Saas平臺是運營saas軟體的平臺。SaaS提供商為企業搭建資訊化所需要的所有網路基礎設施及軟體、硬體運作平臺，並負責所有前期的實施、後期的維護等一系列服務，企業無需購買軟硬體、建設機房、招聘IT人員，即可透過網際網路使用資訊系統。SaaS 是一種軟體佈局模型，其應用專為網路交付而設計，便於使用者透過網際網路託管、部署及接入。