Vue項目中-sass的安裝以及基本使用文法

咱們閑話少說，直接上幹貨了~

PS. 文法格式 (Syntax) .sass和.scss的差別

Sass 有兩種文法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 這種格式僅在 CSS3 文法的基礎上進行拓展，所有 CSS3 文法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支援大多數 CSS hacks 寫法以及浏覽器字首寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作為拓展名。

另一種也是最早的 Sass 文法格式，被稱為縮進格式 (Indented Sass) 通常簡稱 “Sass”，是一種簡化格式。它使用 “縮進” 代替 “花括号” 表示屬性屬于某個選擇器，用 “換行” 代替 “分号” 分隔屬性，很多人認為這樣做比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可以使用 Sass 的全部功能，隻是與 SCSS 相比個别地方采取了不同的表達方式，具體請檢視 the indented syntax reference。這種格式以 .sass 作為拓展名。

⑴ 安裝sass 依賴包

⑵在vue頁面中引入scss檔案

使用scss時候在所在的style樣式标簽上添加lang=”scss”即可應用對應的文法，否則報錯

引入scss檔案的時候通過@import 來完成，檔案路徑根據實際情況來寫，我這裡隻是舉個栗子。

⑶scss的基本使用文法

①變量聲明

PS：區分全局變量和局部變量

$height:200px; //全局變量聲明不在大花括号内
$bgcolor:blue;
body {
   .father01 {  //嵌套
      width:$width;
      height:$height;
      $border:1px solid red; //局部變量是聲明在元素内的
      border: $border;
      $bgcolor:purple; //全局變量和局部變量名一緻時，調用局部變量進行覆寫
      background-color: $bgcolor;
   }
}
           

sass變量的聲明和css屬性的聲明很像：

$highlight-color: #F90;

實際使用如下：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}
           

②變量引用

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//編譯後

.selected {
  border: 1px solid #F90;
}
           

③變量名用中劃線還是下劃線分隔（sass并不想強迫任何人一定使用中劃線或下劃線，是以這兩種用法互相相容。用中劃線聲明的變量可以使用下劃線的方式引用，反之亦然。這意味着即使compass選擇用中劃線的命名方式，這并不影響你在使用compass的樣式中用下劃線的命名方式進行引用：）

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

//編譯後

a {
  color: blue;
}
           

④嵌套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 }
           

上邊的例子，會在輸出css時把它轉換成跟你之前看到的一樣的效果。這個過程中，sass用了兩步，每一步都是像打開俄羅斯套娃那樣把裡邊的嵌套規則塊一個個打開。首先，把#content（父級）這個id放到article選擇器（子級）和aside選擇器（子級）的前邊：然後，#content article裡邊還有嵌套的規則，sass重複一遍上邊的步驟，把新的選擇器添加到内嵌的選擇器前邊。

⑤父選擇器的辨別符&

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

當包含父選擇器辨別符的嵌套規則被打開時，它不會像後代選擇器那樣進行拼接，而是&被父選擇器直接替換：

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