本篇文章主要介紹了vue腳手架中配置Sass的方法，現在分享給大家，也給大家做個參考。
世界上最成熟、最穩定、最強大的專業級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-sass
npm install --save-dev node-sass
2 配置: 在build檔案夾下的webpack.base.conf.js的rules裡面添加配置{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
// 不知道為什麼我配置完就打包不了, 不配置就是好用的
3 在APP.vue中修改style标簽
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 }
(2-1) 父選擇器的辨別符&;
使用後代選擇器和為了僞類的時候可能就是比較麻煩了 不知道怎麼寫。這個時候&就派上用場了article a {
color: blue;
&:hover { color: red }
}
// 編譯後
// 其實&相當于是父級
article a { color: blue }
article a:hover { color: red }
(2-2) 群組選擇器的嵌套;
在處理群組的時候隻需要用,分割就好了,就能完美的解析不用内麼麻煩.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) 子組合選擇器和同層組合選擇器：>、+和~;
上邊這三個組合選擇器必須和其他選擇器配合使用，以指定浏覽器僅選擇某種特定上下文中的元素。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選擇器，屬性也可以進行嵌套。盡管編寫屬性涉及的重複不像編寫選擇器那麼糟糕，但是要反複寫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 導入SASS檔案;
css有一個特别不常用的特性，即@import規則，它允許在一個css檔案中導入其他css檔案。然而，後果是隻有執行到@import時，浏覽器才會去下載下傳其他css檔案，這導緻頁面加載起來特别慢。
sass也有一個@import規則，但不同的是，sass的@import規則在生成css檔案時就把相關檔案導入進來。這意味着所有相關的樣式被歸納到了同一個css檔案中，而無需發起額外的下載下傳請求。
4 預設變量值
一般情況下，你反複聲明一個變量，隻有最後一處聲明有效且它會覆寫前邊的值。舉例說明：$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}
但是你不想這種情況你可以使用sass的!default标簽可以實作這個目的。它很像css屬性中!important标簽的對立面，不同的是!default用于變量，含義是：如果這個變量被聲明指派了，那就用它聲明的值，否則就用這個預設值。
5 注釋body {
color: #333; // 這種注釋内容不會出現在生成的css檔案中
padding: 0;
}
6 混合器
如果你的整個網站中有幾處小小的樣式類似(例如一緻的顔色和字型)，那麼使用變量來統一處理這種情況是非常不錯的選擇。但是當你的樣式變得越來越複雜，你需要大段大段的重用樣式的代碼，獨立的變量就沒辦法應付這種情況了。你可以通過sass的混合器實作大段樣式的重用。
混合器使用@mixin辨別符定義。看上去很像其他的CSS @辨別符，比如說@media或者@font-face。這個辨別符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式。下邊的這段sass代碼，定義了一個非常簡單的混合器，目的是添加跨浏覽器的圓角邊框。@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
然後就可以在你的樣式表中通過@include來使用這個混合器，放在你希望的任何地方。@include調用會把混合器中的所有樣式提取出來放在@include被調用的地方。如果像下邊這樣寫：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;
}
混合器太好用了，一不小心你可能會過度使用。大量的重用可能會導緻生成的樣式表過大，導緻加載緩慢。是以，首先我們将讨論混合器的使用場景，避免濫用。
(6-1)給混合器傳參;
混合器并不一定總得生成相同的樣式。可以通過在@include混合器時給混合器傳參，來定制混合器生成的精确樣式。當@include混合器時，參數其實就是可以指派給css屬性值的變量。如果你寫過JavaScript，這種方式跟JavaScript的function很像：@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
當混合器被@include時，你可以把它當作一個css函數來傳參。如果你像下邊這樣寫：a {
@include link-colors(blue, red, green);
}
//Sass最終生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
其實@mixin 的方法還有很多 可以官網檢視
7 使用選擇器繼承來精簡CSS;
使用sass的時候，最後一個減少重複的主要特性就是選擇器繼承。基于Nicole Sullivan面向對象的css的理念，選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend文法實作，如下代碼://通過選擇器繼承繼承樣式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承，如下代碼://.seriousError從.error繼承樣式
.error a{ //應用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //應用到hl.seriousError
font-size: 1.2rem;
}
關于@extend有兩個要點你應該知道。
跟混合器相比，繼承生成的css代碼相對更少。因為繼承僅僅是重複選擇器，而不會重複屬性，是以使用繼承往往比混合器生成的css體積更小。如果你非常關心你站點的速度，請牢記這一點。
繼承遵從css層疊的規則。當兩個不同的css規則應用到同一個html元素上時，并且這兩個不同的css規則對同一屬性的修飾存在不同的值，css層疊規則會決定應用哪個樣式。相當直覺：通常權重更高的選擇器勝出，如果權重相同，定義在後邊的規則勝出。
混合器本身不會引起css層疊的問題，因為混合器把樣式直接放到了css規則中，而繼承存在樣式層疊的問題。被繼承的樣式會保持原有定義位置和選擇器權重不變。通常來說這并不會引起什麼問題，但是知道這點總沒有壞處。
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：