世界上最成熟、最穩(wěn)定、最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語(yǔ)言！

兼容CSS
Sass完全兼容所有版本的CSS。我們對(duì)此嚴(yán)格把控，所以你可以無(wú)縫地使用任何可用的CSS庫(kù)。

特性豐富
Sass擁有比其他任何CSS擴(kuò)展語(yǔ)言更多的功能和特性。Sass核心團(tuán)隊(duì)不懈努力，一直使其保持領(lǐng)先地位。

成熟
Sass已經(jīng)經(jīng)過(guò)其核心團(tuán)隊(duì)超過(guò)8年的精心打造。

行業(yè)認(rèn)可
一次又一次地，行業(yè)把Sass作為首選CSS擴(kuò)展語(yǔ)言。

社區(qū)龐大
數(shù)家科技企業(yè)和成百上千名開(kāi)發(fā)者為Sass提供支持。

框架
有無(wú)數(shù)的框架使用Sass構(gòu)建。比如Compass，Bourbon，和Susy。

我是在vue腳手架中安裝的

1 安裝

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

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

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

3 在APP.vue中修改style標(biāo)簽

<style lang="scss">

4 使用

(1) 變量

1-1) 使用變量

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

sass使用$符號(hào)來(lái)標(biāo)識(shí)變量(老版本的sass使用!來(lái)標(biāo)識(shí)變量。改成$是多半因?yàn)?highlight-color看起來(lái)太丑了。)

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中使用-和_其實(shí)是一樣的 例如$link-color和$link_color其實(shí)指向的是同一個(gè)變量。

$link-color: blue;
a {
 color: $link_color;
}

//編譯后
a {
 color: blue;
}

(2) 嵌套css規(guī)則

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

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

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

#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 }

(2-1) 父選擇器的標(biāo)識(shí)符&;

使用后代選擇器和為了偽類的時(shí)候可能就是比較麻煩了 不知道怎么寫。這個(gè)時(shí)候&就派上用場(chǎng)了

article a {
 color: blue;
 &:hover { color: red }
}

// 編譯后

// 其實(shí)&相當(dāng)于是父級(jí)
article a { color: blue }
article a:hover { color: red }

(2-2) 群組選擇器的嵌套;

在處理群組的時(shí)候只需要用,分割就好了,就能完美的解析不用內(nèi)么麻煩

.container {
 h1, h2, h3 {margin-bottom: .8em}
}

<!--編譯后-->

.container h1 {margin-bottom: .8em}
.container h2 {margin-bottom: .8em}
.container h3 {margin-bottom: .8em}

這種也是一樣的

nav, aside {
 a {color: blue}
}
//編譯后
nav a, aside a {color: blue}

(2-3) 子組合選擇器和同層組合選擇器：>、+和~;

上邊這三個(gè)組合選擇器必須和其他選擇器配合使用，以指定瀏覽器僅選擇某種特定上下文中的元素。

article {
 // 同層全體組合選擇器
 ~ article { border-top: 1px dashed #ccc }
 // 直接子元素
 > section { background: #eee }
 dl > {
 dt { color: #333 }
 dd { color: #555 }
 }
 // 同層相鄰組合選擇器
 nav + & { margin-top: 0 }
}

(2-4) 嵌套屬性;

在sass中，除了CSS選擇器，屬性也可以進(jìn)行嵌套。盡管編寫屬性涉及的重復(fù)不像編寫選擇器那么糟糕，但是要反復(fù)寫border-styleborder-widthborder-color以及border-*等也是非常煩人的。在sass中，你只需敲寫一遍border：

nav {
 border: {
 style: solid;
 width: 1px;
 color: #ccc;
 }
}

// 編譯后
nav {
 border-style: solid;
 border-width: 1px;
 border-color: #ccc;
}

你甚至還可以這樣寫

nav {
 border: 1px solid #ccc {
 left: 0px;
 right: 0px;
 }
}

// 編譯后
nav {
 border: 1px solid #ccc;
 border-left: 0px;
 border-right: 0px;
}

3 導(dǎo)入SASS文件;

css有一個(gè)特別不常用的特性，即@import規(guī)則，它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而，后果是只有執(zhí)行到@import時(shí)，瀏覽器才會(huì)去下載其他css文件，這導(dǎo)致頁(yè)面加載起來(lái)特別慢。

sass也有一個(gè)@import規(guī)則，但不同的是，sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中，而無(wú)需發(fā)起額外的下載請(qǐng)求。

4 默認(rèn)變量值

一般情況下，你反復(fù)聲明一個(gè)變量，只有最后一處聲明有效且它會(huì)覆蓋前邊的值。舉例說(shuō)明：

$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}

但是你不想這種情況你可以使用sass的!default標(biāo)簽可以實(shí)現(xiàn)這個(gè)目的。它很像css屬性中!important標(biāo)簽的對(duì)立面，不同的是!default用于變量，含義是：如果這個(gè)變量被聲明賦值了，那就用它聲明的值，否則就用這個(gè)默認(rèn)值。

5 注釋

body {
 color: #333; // 這種注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中
 padding: 0; /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */
}

6 混合器

如果你的整個(gè)網(wǎng)站中有幾處小小的樣式類似（例如一致的顏色和字體），那么使用變量來(lái)統(tǒng)一處理這種情況是非常不錯(cuò)的選擇。但是當(dāng)你的樣式變得越來(lái)越復(fù)雜，你需要大段大段的重用樣式的代碼，獨(dú)立的變量就沒(méi)辦法應(yīng)付這種情況了。你可以通過(guò)sass的混合器實(shí)現(xiàn)大段樣式的重用。

混合器使用@mixin標(biāo)識(shí)符定義。看上去很像其他的CSS @標(biāo)識(shí)符，比如說(shuō)@media或者@font-face。這個(gè)標(biāo)識(shí)符給一大段樣式賦予一個(gè)名字，這樣你就可以輕易地通過(guò)引用這個(gè)名字重用這段樣式。下邊的這段sass代碼，定義了一個(gè)非常簡(jiǎn)單的混合器，目的是添加跨瀏覽器的圓角邊框。

@mixin rounded-corners {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

然后就可以在你的樣式表中通過(guò)@include來(lái)使用這個(gè)混合器，放在你希望的任何地方。@include調(diào)用會(huì)把混合器中的所有樣式提取出來(lái)放在@include被調(diào)用的地方。如果像下邊這樣寫：

notice {
 background-color: green;
 border: 2px solid #00aa00;
 @include rounded-corners;
}

//sass最終生成：
// 編譯后
.notice {
 background-color: green;
 border: 2px solid #00aa00;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

混合器太好用了，一不小心你可能會(huì)過(guò)度使用。大量的重用可能會(huì)導(dǎo)致生成的樣式表過(guò)大，導(dǎo)致加載緩慢。所以，首先我們將討論混合器的使用場(chǎng)景，避免濫用。

(6-1)給混合器傳參;

混合器并不一定總得生成相同的樣式。可以通過(guò)在@include混合器時(shí)給混合器傳參，來(lái)定制混合器生成的精確樣式。當(dāng)@include混合器時(shí)，參數(shù)其實(shí)就是可以賦值給css屬性值的變量。如果你寫過(guò)JavaScript，這種方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
 color: $normal;
 &:hover { color: $hover; }
 &:visited { color: $visited; }
}

當(dāng)混合器被@include時(shí)，你可以把它當(dāng)作一個(gè)css函數(shù)來(lái)傳參。如果你像下邊這樣寫：

a {
 @include link-colors(blue, red, green);
}

//Sass最終生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

其實(shí)@mixin 的方法還有很多 可以官網(wǎng)查看

7 使用選擇器繼承來(lái)精簡(jiǎn)CSS;

使用sass的時(shí)候，最后一個(gè)減少重復(fù)的主要特性就是選擇器繼承。基于Nicole Sullivan面向?qū)ο蟮腸ss的理念，選擇器繼承是說(shuō)一個(gè)選擇器可以繼承為另一個(gè)選擇器定義的所有樣式。這個(gè)通過(guò)@extend語(yǔ)法實(shí)現(xiàn)，如下代碼:

//通過(guò)選擇器繼承繼承樣式
.error {
 border: 1px solid red;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}

.seriousError不僅會(huì)繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會(huì)被.seriousError以組合選擇器的形式繼承，如下代碼:

//.seriousError從.error繼承樣式
.error a{ //應(yīng)用到.seriousError a
 color: red;
 font-weight: 100;
}
h1.error { //應(yīng)用到hl.seriousError
 font-size: 1.2rem;
}

關(guān)于@extend有兩個(gè)要點(diǎn)你應(yīng)該知道。

跟混合器相比，繼承生成的css代碼相對(duì)更少。因?yàn)槔^承僅僅是重復(fù)選擇器，而不會(huì)重復(fù)屬性，所以使用繼承往往比混合器生成的css體積更小。如果你非常關(guān)心你站點(diǎn)的速度，請(qǐng)牢記這一點(diǎn)。
繼承遵從css層疊的規(guī)則。當(dāng)兩個(gè)不同的css規(guī)則應(yīng)用到同一個(gè)html元素上時(shí)，并且這兩個(gè)不同的css規(guī)則對(duì)同一屬性的修飾存在不同的值，css層疊規(guī)則會(huì)決定應(yīng)用哪個(gè)樣式。相當(dāng)直觀：通常權(quán)重更高的選擇器勝出，如果權(quán)重相同，定義在后邊的規(guī)則勝出。

混合器本身不會(huì)引起css層疊的問(wèn)題，因?yàn)榛旌掀靼褬邮街苯臃诺搅薱ss規(guī)則中，而繼承存在樣式層疊的問(wèn)題。被繼承的樣式會(huì)保持原有定義位置和選擇器權(quán)重不變。通常來(lái)說(shuō)這并不會(huì)引起什么問(wèn)題，但是知道這點(diǎn)總沒(méi)有壞處。

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

在javascript中如何實(shí)現(xiàn)最長(zhǎng)公共子序列

關(guān)于vue如何實(shí)現(xiàn)動(dòng)態(tài)加載圖片src

關(guān)于vue2.0中datepicker使用方法

JavaScript調(diào)停者模式（詳細(xì)教程）

在jQuery中有關(guān)Dom元素使用方法？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com