常見的CSS預處理器之Sass初體驗

sass（英文全稱：syntactically awesome stylesheets）是乙個最初由hampton catlin設計並由natalie weizenbaum開發的層疊樣式表語言。

sass是乙個將指令碼解析成css的指令碼語言，即sassscript，它包括兩套語法。最開始的語法叫「縮排語法」，使用縮進來區分**塊並且用回車將不同規則隔開；而較新的語法叫做「scss」，使用css一樣的語法塊也就是大括號將不同規則分開，用分號將具體樣式分開。通常情況下這兩套語法是通過.sass 和 .scss 兩個副檔名來區分的。

對於sass的基本使用，我們需要從巢狀、變數、函式、繼承和高階屬性這幾方面來一一了解。

1 環境的布置

2 sass 和 scss

具體語法上面的差異

scss語法：

$width: 100%;
$height: 100px;
$color: red;
.container
.container2
.container3

sass 語法：

!primary-color= hotpink
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius
.my-element
color= !primary-color
width= 100%
overflow= hidden
.my-other-element
+border-radius(5px)

3 編譯 .scss 檔案

sass main.scss main.css

sass 編譯語法和 less編譯語法有一定的相似性；不同的是sass實際上是支援編譯風格的以及檔案偵聽。

sass --style compressed main.sass main.css

檔案偵聽的意思就是說我們監聽的某乙個檔案它有變動的時候，然後我們在儲存的時候會自動把它編譯成對應的css。

監聽檔案 sass --watch main.scss:main.css 監聽資料夾

sass --watch ***x/sass:***xx/***xx

4 sass基本語法

sass巢狀

sass的巢狀相較於less有乙個不同的地方在於，在偽類中可以實現乙個屬性的巢狀，比如在sass中下面樣式：

p 
} 在css中編譯出來的是：
p

sass 變數

sass的變數與less比較有一定的不同，在less中是以@ 符號開頭的，而在sass中則是$ 美元符號，其他部分沒有區別。

sass 函式

在sass中函式要加上乙個@function

@function double($x, $y, $z) 
#header
編譯成css：
#header

內建函式

sass 注釋

// 普通注釋 // 只在原始檔出現，編譯之後就不存在了 /**　注釋 * compressed的style的css中沒有 *//*！ *　重要注釋 * 任何style的css檔案中都會有，即使編譯混淆，注釋仍然存在

*/

sass 計算屬性

body

sass 繼承

sass 引入

sass的引入和less是一樣的，都是加上乙個@import 「.scss檔名」。

高階屬性

sass 優勢和劣勢

優點：

缺點：

常見的CSS預處理器之Sass初體驗

css預處理器sass學習

css預處理器

CSS預處理器

常見的CSS預處理器之Sass初體驗

css預處理器sass學習

css預處理器

CSS預處理器

相關推薦