一、scss的幾個(gè)主要特點(diǎn)

1.變量

如何在scss中定義變量、使用變量？

例（1）：

定義變量 $color:pink

使用變量 div{

background-color:$color

}

在定義變量的時(shí)候變量名必須以$開頭。

為什么要使用變量？

代碼可維護(hù)性高、方便統(tǒng)一管理

2、嵌套

所謂嵌套就是父級(jí)選擇器里可以套后代選擇器

例（2）：

html代碼：

<div>

? ? ? ? <p>我是p標(biāo)簽</p>

</div>

scss代碼：

div{

????width:100px;

????height:100px;

????? ? ? p {

????????????????font-size:20px;

? ? ? ?}

}

不要懷疑，就是這么簡(jiǎn)單easy !

3、scss里的 & 符號(hào)

正常情況下嵌套選擇器的時(shí)候會(huì)這樣：

見例（2）scss代碼 進(jìn)行預(yù)處理之后 會(huì)生成這樣的代碼： div{} , div p{}

注意div跟p中間的空格，有時(shí)候我們并不希望出現(xiàn)這個(gè)空格，比如在使用 :hover的時(shí)候，這個(gè)時(shí)候你就可以在冒號(hào)前面加上&。

說白了，&=父元素 ，前面都是廢話，這句才是重點(diǎn)！

4、 混合器（mixin）

解決scss冗余代碼的神器！

mixin 類似于 javaScript 里面的函數(shù)，作用就是 定義一個(gè)代碼塊 然后這段代碼可以重復(fù)被調(diào)用。

例（3）

@mixin radius($angle:50% ) {

border-radius:$angle;

}

這樣就申明了一個(gè)mixin 代碼塊，你需要就直接調(diào)用 比如 div{ @include radius },這個(gè)div就會(huì)變成圓角，當(dāng)然你可以繼續(xù)將有用的重復(fù)的代碼放進(jìn)來，在不同的地方直接調(diào)用即可，這樣即簡(jiǎn)化了代碼，維護(hù)的時(shí)候又方便，有沒有爽的一匹？， 還有，上面的代碼進(jìn)行了傳參，還使用了默認(rèn)值哦！。

注意的地方是 形參也是一個(gè)變量所以前面也要加$, 我就犯過這樣的錯(cuò)！

默認(rèn)值，就是在形參后面跟冒號(hào)加默認(rèn)值，如果你在調(diào)用的時(shí)候沒傳參數(shù)，他就會(huì)使用你設(shè)置的默認(rèn)值。

先暫時(shí)就寫這么多，后續(xù)再補(bǔ)充，自己也在學(xué)習(xí)當(dāng)中，大家一起進(jìn)步！