vue腳手架中配置Sass

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

我是在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裏面添加配置

// 若是你是.sass文件要設置
{
  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 }

(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; /* 這種註釋內容會出如今生成的css文件中 */
}

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規則中，而繼承存在樣式層疊的問題。被繼承的樣式會保持原有定義位置和選擇器權重不變。一般來講這並不會引發什麼問題，可是知道這點總沒有壞處。

以上就是我在官網所瞭解到的信息, 不算全面, 可是以爲在平常開發確定夠用了. 附上官網地址

Sass官網地址