世界上最成熟、最穩定、最強大的專業級CSS擴展語言！

兼容CSS
Sass完全兼容所有版本的CSS。我們對此嚴格把控，所以你可以無縫地使用任何可用的CSS庫。

特性豐富
Sass擁有比其他任何CSS擴展語言更多的功能和特性。Sass核心團隊不懈努力，一直使其保持領先地位。

成熟
Sass已經經過其核心團隊超過8年的精心打造。

行業認可
一次又一次地，行業把Sass作為首選CSS擴展語言。

社區龐大
數家科技企業和成百上千名開發者為Sass提供支持。

框架
有無數的框架使用Sass構建。比如Compass，Bourbon，和Susy。

我是在vue腳手架中安裝的

1 安裝

npm install --save-dev sass-loader//sass-loader依賴于node-sassnpm install --save-dev node-sass

2 配置: 在build文件夾下的webpack.base.conf.js的rules里面添加配置

{ test: //.sass$/, loaders: ['style', 'css', 'sass']}// 不知道為什么我配置完就打包不了, 不配置就是好用的

3 在APP.vue中修改style標簽

<style lang="scss">

4 使用

(1) 變量

1-1) 使用變量

sass讓人們受益的一個重要特性就是它為css引入了變量。你可以把反復使用的css屬性值 定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。或者，對于僅使用過一 次的屬性值，你可以賦予其一個易懂的變量名，讓人一眼就知道這個屬性值的用途。

sass使用$符號來標識變量(老版本的sass使用!來標識變量。改成$是多半因為!highlight-color看起來太丑了。)

1-2) 變量聲明

$back: red#app color: $back// 變量聲明也分為全局變量和局部變量 // 這樣也是好用的$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}//編譯后.selected { border: 1px solid #F90;}

1-3) 變量命名

在sass中使用-和_其實是一樣的 例如$link-color和$link_color其實指向的是同一個變量。

$link-color: blue;a { color: $link_color;}//編譯后a { color: blue;}

(2) 嵌套css規則

css中重復寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時，往往需要 一遍又一遍地寫同一個ID：

#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }

像這種情況，sass可以讓你只寫一遍，且使樣式可讀性更高。在Sass中，你可以像俄羅斯套娃那樣在規則塊中嵌套規則塊。sass在輸出css時會幫你把這些嵌套規則處理好，避免你的重復書寫。

#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE }} /* 編譯后 */#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }