最近一直被泡在前端窯子里，因此也接觸到一些不新鮮又新鮮的東西，其中今天我們就要學習SASS 

一、SASS是什么？

它是對CSS的擴展，讓CSS語言更強大。優(yōu)雅。

允許使用變量、嵌套規(guī)則、繼承、自定義函數(shù)、條件語句等一系列功能，并且能夠完全兼容CSS語法。

二、安裝和使用

2.1 安裝

SASS是Ruby語言寫的，因此在安裝SASS之前必須先安裝Ruby。

假如你已經(jīng)安裝好了Ruby，那么在命令行輸入如下命令就可以使用了：

gem install sass

允許使用變量、嵌套規(guī)則、繼承、自定義函數(shù)、條件語句等一系列功能，并且能夠完全兼容CSS語法。

2.2 使用

SASS文件其實就是普通的文本文件，里面可以直接編寫CSS代碼，文件名后綴必須是.scss。

下面的命令演示如何將.scss文件輸出為.css文件。（假如文件名為test）

sass test.scss test.css

SASS提供如下幾種編譯風格：

* nested：嵌套縮進的css代碼，它是默認值；

* expanded：沒有縮進的、擴展的css代碼；

* compact：簡潔的css代碼格式；

* compressed：壓縮后的css代碼；

生產(chǎn)環(huán)境中，我們一般選擇最后一種，如下：

sass --style compressed test.sass test.css

也可以讓SASS監(jiān)聽某個文件或目錄，一旦源文件有變動，就會自動編譯。

//監(jiān)聽文件

sass --watch input.scss:output.css

//監(jiān)聽目錄

sass --watch pro/sass:public/css

SASS的官方提供了一個在線轉(zhuǎn)換器。你可以在那里，敲敲并運行下面的各種例子。

2.3實踐

2.3.1 變量：

2.3.2 偽類：

2.3.3 嵌套：

2.3.4 繼承（@extend）：

2.3.5 引入（@mixin和@include）：

2.3.6 傳參（@mixin和@include()）：

2.3.7 插入文件（@import）

@import "path/filename.scss";

@import "filename.css";

 

2.3.8 循環(huán)（for/while/each）

for：

while：

each：

原文來自：博客園/LE-ZHOU