自從用了Sass，我比以前更快了?

本文首發在我的部落格中，傳送門：旅途與畫,部落格求star?

前言

說到css，相信大家都知道，css樣式是用來修飾網頁頁面結構的。對於一名前端來說寫好css並不難，但如何寫出優雅可複用、易重構的css程式碼並不容易。

於是css前處理器便出現在大家的視線裡，分別是 stylus、less、sass。它們的出現讓編寫css更加像JavaScript一樣具有嚴謹性、程式設計性。

由於我工作中常用Scss(Sass3.0版本後更偏向css的原生語法)，那就大展身手介紹一下Sass的用法，讓更多小夥伴變得跟我一樣快（just a kiding ?）。

在此對Stylus、Less就不做多敘述了，如果小夥伴對其他兩種感興趣，可以訪問 Stylus官網 、Less官網瞭解更多哦。

Sass背景

Sass（Syntactically Awesome Style Sheets），套用sass官網的牛逼介紹：“Sass是世界上最成熟、最穩定、最強大的專業級CSS擴充套件語言！”。是一個相對新的css預編譯框架，為前端開發而生。

為什麼使用Sass?

通過Sass編寫css程式碼，你可以減少冗餘的css程式碼，編寫更加語義化的css，它擴充套件了css的能力，增加變數、巢狀css規則、混合器、繼承、函式等新特性。

Write less，Do more。何樂而不為呢？?

.sass vs .scss ?

早已Sass出現的時候，是沒有Scss的，Sass語法跟原生css不盡相同。使用縮排代替括號，沒有分號。有些開發者並不適應這種寫法，於是在Sass釋出的3.0版本後官方提出修改，將檔案字尾名以.sass改成了.scss,語法也更貼切原生css，讓開發者可以像原來寫css一樣愉快的寫scss。scss對應css就像typescript是JavaScript的超集一樣的關係。

Sass安裝

關於Sass安裝網上有很多詳細教程，推薦幾篇典型的安裝教程文章。
Sass官網安裝教程
慕課網Sass安裝

Sass在node.js編譯環境的安裝

1. 在 nodejs 的平臺下面，我們需要安裝node-sass模組，通過這個模組，我們可以將 scss 檔案轉換成css 檔案

   $ cnpm install node-sass --save
   複製程式碼

2. 安裝完成以後，我們新建一個檔案，名為index.scss檔案

3. 使用node-sass的語法來編譯index.scss,具體語法如下

   node-sass --watch src/index.scss dist/index.css
   複製程式碼

4. 如果我們需要監控一個資料夾下面所有的檔案，則需要使用如下的語法格式

   node-sass  -w -r <原始檔夾> -o <目標資料夾>    //它只會跟蹤同名檔案，沒有則新建
   -w, --watch                Watch a directory or file //監聽
   -r, --recursive            Recursively watch directories or files  //遞迴地檢視目錄或檔案
   -o, --output               Output directory //輸出目錄
   複製程式碼

5. 為了能夠方法的執行我們的node-sass語法，我們一般會把編譯命令寫在 package.json的配置檔案下面，如下：

   {
     "name": "sass-demo",
     "version": "1.0.0",
     "description": "sass練習",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "sass": "node-sass --watch ./src/index.scss ./src/index.css"
     },
     "keywords": [],
     "author": "luckydong",
     "license": "ISC",
     "dependencies": {
       "node-sass": "^4.9.0"
     }
   }
   複製程式碼

1、 Sass變數

1.1 變數宣告與引用

sass變數宣告和css屬性宣告很像：

$theme-color: #fff;
複製程式碼

這意味著變數$theme-color現在的值是#fff。

$theme-color: #fff;
div {
  $height: 100px;
  height: $height;
  color: $theme-color;
}
//編譯後
div {
  height: 100px;
  color: #fff;
}
複製程式碼

在這段程式碼中，$theme-color這個變數定義在規則塊外邊，所以在這個樣式表中都可以像 div規則塊那樣引用它。

1.2 預設變數

$defaultWidth: 100px; //全域性變數
$defaultWidth: 200px !default;
.div1 {
  $height: 50px; //定義變數  區域性變數
  width: $defaultWidth;
  height: $height; //引用變數
}
.div2 {
  width: $defaultWidth;
}
複製程式碼

注意：在Scss語法裡面，變數分為全域性變數與區域性變數，變數加上!default 以後就是預設變數

2、 巢狀 CSS 規則

css中重複寫選擇器是非常繁瑣無趣的事。如果要寫一大串指向頁面中同一塊樣式時，往往需要多次寫同一個id或是同一個class類名:

#content article h1 {
  color: #333;
}
#content article p {
  margin-bottom: 1.4em;
}
#content aside {
  background-color: #eee;
}
複製程式碼

上面的css程式碼使用scss語法編寫後就會變得簡單明瞭、結構清晰，如下所示

#content {
  article {
    h1 {
      color: #333;
    }
    p {
      margin-bottom: 1.4em;
    }
  }
  aside {
    background-color: #eee;
  }
}
複製程式碼

2.1 父選擇器的識別符號&

在 scss 中，有時候我們需要在子級當中使用父級選擇器，此時我們就需要使用&來選取父級選擇器

.div1 {
  width: 100px;
  height: 100px;
}
.div1 img {
  width: 100%;
  height: auto;
}
.div1:hover {
  border: 1px solid black;
}
複製程式碼

上面的 css程式碼經過scss換寫後，可以簡寫為如下

.div1 {
  width: 100px;
  height: 100px;
  img {
    width: 100%;
    height: auto;
  }
  &:hover {
    border: 1px solid black;
  }
}
複製程式碼

2.2 子級選擇器中的> ~與+

1. '>'代表是的子級選擇器
2. 空格程式碼的是後代選擇器
3. '+'代表的是相鄰兄弟選擇器
4. ‘～’代表兄弟選擇器

以上的四種用法與 CSS 的選擇器保持一致

3、 混合器

有時候我們在寫樣式的時候會發現，有些地方有樣式，其中有一些是相同的，這個時候，我們會把這些樣式提取出來，然後再單獨匯入進去。

例如：假設我們需要寫一個 button，這個 button 的大小與邊框都一樣，唯獨在顏色上一樣的時候，我們可以使用混合器做如下處理

@mixin btn {
  width: 120px;
  height: 35px;
  border: 1px solid lightgray;
  border-radius: 15px;
}
.btn-success {
  @include btn;
  background-color: green;
}
複製程式碼

說明：在上面的程式碼當中，不難發現，我們使用了@mixin 來定義一個混合器。在下面的樣式當中，我們使用了@include匯入混合器，這樣 .btn-success 的樣式就結合了之前定義的樣式了。

3.1 混合器的中引數

SCSS中的混合器有點類似於js中的方法，定義一個混合器就相當於定義了一個方法，而我們定義方法的時候可以定義引數，在呼叫方法的時候，我們則可以使用這個引數。同理，在 SCSS 當中，定義混合器也可以使用引數，程式碼如下所示：

@mixin flex-box($direction) {
  display: flex;
  flex-direction: $direction;
}
.item1 {
  @include flex-box(row);
  justify-content: center;
  align-items: center;
}
複製程式碼

上面的程式碼經過 node-sass編譯後，如下：

.item1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
複製程式碼

3.2 混合器引數的預設值

為了在@include混合器時不必傳入所有的引數，給引數指定一個預設值，上面的scss 中，如果希望flex佈局中預設的主軸是 column，可以定義如下：

@mixin flex-box($direction: column) {
  display: flex;
  flex-direction: $direction;
}
.item1 {
  @include flex-box;
  justify-content: center;
  align-items: center;
}
複製程式碼

在上面的 SCSS 當中，我們在呼叫的時候沒有傳遞引數給混合器，而是使用了它的預設值

4、 選擇器繼承

使用sass的時候，最後一個減少重複的主要特性就是選擇器繼承。

選擇器繼承指的是一個選擇器可以繼承另一個選擇器定義的所有樣式。這個通過@extend語法實現，如下程式碼:

//通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.loading-error {
  @extend .error;
  border-width: 3px;
}
複製程式碼

上面的@extend就相當於繼承，後面的.error 則是繼承的選擇器，上面的 scss 經過編譯後所呈現的程式碼如下所示：

.error,
.loading-error {
  border: 1px solid red;
  background-color: #fdd;
}

.loading-error {
  border-width: 3px;
}
複製程式碼

說明：我們可以看到，繼承的選擇器，它在這裡使用了分組選擇器來完了這個功能，這樣我們的.loading-error 的樣式則單獨的區分開。

關於@extend有兩個要點你應該知道。

跟混合器相比，繼承生成的css程式碼相對更少。因為繼承僅僅是重複選擇器，而不會重複屬性，所以使用繼承往往比混合器生成的css體積更小。如果你非常關心你站點的速度，請牢記這一點。

繼承遵從css層疊的規則。當兩個不同的css規則應用到同一個html元素上時，並且這兩個不同的css規則對同一屬性的修飾存在不同的值，css層疊規則會決定應用哪個樣式。

相當直觀：通常權重更高的選擇器勝出，如果權重相同，定義在後邊的規則勝出。

寫在最後

1. 變數
2. 巢狀 CSS 規則
3. 混合器
4. 繼承

以上的四種是 Sass 的核心內容，也是最基礎內容，通過了解學習後，我們可以快速的編寫頁面樣式，提高開發效率，做到 CSS 程式碼重複率低，可複用性高。

下一篇我會帶來關於Sass的高階用法，敬請期待！?