*這里遇到了一個(gè)坑，在.sass文件中不要在!global后面直接添加注釋，編譯會(huì)報(bào)錯(cuò)，但是在.scss文件中在!global后面直接添加注釋，編譯卻不會(huì)報(bào)錯(cuò)，估計(jì)是因?yàn)?scss文件中有;可以明確區(qū)分代碼和注釋，而.sass中不能明確區(qū)分什么是注釋什么是代碼

如果要將變量插入到字符串中，可以使用插值符號——#{}

插值符號的使用

編譯后的.css文件

嵌套(選擇器嵌套&屬性嵌套&父選擇器)

選擇器嵌套&屬性嵌套&父選擇器的使用

編譯后的.css文件

運(yùn)算

SASS還支持運(yùn)算的功能

加減乘除、取整等運(yùn)算 (+, -, *, /, %)，同時(shí)，如果有需要它會(huì)在不同單位間轉(zhuǎn)換值。

編譯前.sass

編譯后.css

比較特殊的是／運(yùn)算，根據(jù)不同情況可以處理為除法運(yùn)算或者僅僅只是分隔數(shù)字的作用

以下三種情況/將被視為除法運(yùn)算符號：

如果值，或值的一部分，是變量或者函數(shù)的返回值

如果值被圓括號包裹

如果值是算數(shù)表達(dá)式的一部分

但如果希望使用變量，同時(shí)又要確保/不做除法運(yùn)算而是完整地編譯到 CSS 文件中，只需要用#{}插值語句將變量包裹。

編譯前.sass

編譯后.css

除了數(shù)值的運(yùn)算還有顏色值的計(jì)算

顏色值的運(yùn)算是分段計(jì)算進(jìn)行的，也就是分別計(jì)算紅色，綠色，以及藍(lán)色的值

不過感覺一般實(shí)際項(xiàng)目中很少用到顏色值的計(jì)算，不過覺得有趣，所以就簡單提一下

編譯前.sass

編譯后.css

混合指令 (Mixin Directives)

混合指令（Mixin）用于定義可重復(fù)使用的樣式，通過@mixin來定義，@include來調(diào)用，同時(shí)支持參數(shù)的指定，參數(shù)若是沒有傳時(shí)，可以使用默認(rèn)值，或者明確要傳入哪一個(gè)特定參數(shù)。

編譯前.sass

編譯后.css

繼承 ( @extend )

sass支持一個(gè)選擇器繼承另一個(gè)選擇器的所有樣式。

編譯前.sass

編譯后.css

插入文件( @import )

Sass 拓展了@import的功能，允許其導(dǎo)入 SCSS 或 Sass 文件。被導(dǎo)入的文件將合并編譯到同一個(gè) CSS 文件中，另外，被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用。

若導(dǎo)入的文件后綴名為.css文件，則import作為普通的css語句。

若導(dǎo)入的文件后綴名為.sass或.scss，則被導(dǎo)入的文件將與當(dāng)前文件合并，同時(shí)，@import "foo"或者@import "foo.sass"導(dǎo)入的效果都是一致的，沒有指定拓展名，Sass 將會(huì)試著尋找文件名相同，拓展名為.scss或.sass的文件并將其導(dǎo)入。

注釋

Sass 支持標(biāo)準(zhǔn)的 CSS 多行注釋/* */，以及單行注釋//，前者會(huì)被完整輸出到編譯后的 CSS 文件中，而后者則不會(huì)。

編譯前.sass

編譯后.css

高級用法

sass支持的數(shù)據(jù)類型中，除了數(shù)字，字符串，顏色，布爾型，空值，

還有：

數(shù)組 (list)，用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

maps, 相當(dāng)于 JavaScript 的 object，(key1: value1, key2: value2)

于是我們便可以使用@each這樣的高級用法

@each

編譯前.sass

編譯后.css

編譯前.sass

編譯后.css

@for

編譯前.sass

編譯后.css

@if

編譯前.sass

編譯后.css

SASS常用語法就總結(jié)到這里了，都是一些比較常見，日常開發(fā)中能用到的語法。

在總結(jié)的過程中，對我也是一個(gè)很好的鞏固的過程，畢竟組織成文字和小demo的形式更容易記住。

最后，個(gè)人認(rèn)為用的合適才是發(fā)揮了sass帶來的便利，不要為了用sass而用sass，一不小心反而會(huì)使得代碼變得復(fù)雜。