Sass中的 @-Rules

1. 簡介

本節(jié)內(nèi)容我們將講解 Sass 中其他的 @ 規(guī)則，這些規(guī)則可能我們不怎么常用，但是你需要了解它們，同時本節(jié)教程中還會提及前面章節(jié)講過的一些規(guī)則，以便幫你做一下復習。

2. 什么是 @-Rules

什么是 @-Rules 呢？其實就是以 @ 開頭的一些規(guī)則，在 CSS 中有很多 @-Rules 是你經(jīng)常用的，比如 @media 、@font-face 等等；那么在 Sass 中除了支持 CSS 所有的 @-Rules 外，Sass 還提供了一些擴展的 @ 規(guī)則，前面的章節(jié)我們已經(jīng)講了很多了，比如 @if 、@for、@mixin 等等。

3. 使用場景

在 Sass 中不同的 @-Rules 有不同的語法和使用場景，我們結合使用場景來過一遍 Sass 中的 @-Rules 。

3.1 @use 和 @import

在前面的章節(jié)中我們講過 @use 和 @import ，回憶一下，它們都是用于加載文件內(nèi)容的（包括文件中的 mixin 、函數(shù)和變量等），還記不記得我們建議使用 @use 來替代 @import，所以說 @use 承載了 @import 的功能，它的語法如下：

@use 'my/a';
@use 'my/b';

3.2 @forward

@forward 的工作原理和 @use 基本相同，都是用于加載文件內(nèi)容的，不過 @forward 可以跨多個文件來組成一個 Sass 庫，一般在寫一個開源的 Sass 樣式庫的時候你可能會用到它，在項目中是不常用的。

在這里我們舉個簡單的例子來感受下，假如我在 src/a.scss 中定義了一個 mixin ，代碼如下所示：

// src/a.scss 
@mixin bor {
	width: 100px;
	height: 100px;
}

然后我在 b.scss 中使用 @forward 來導入它，代碼如下所示：

// b.scss
@forward 'src/a';

最終呢，我是想在和 b.scss 同級的 c.scss 文件中使用 a.scss 中的 mixin，那么在 c.scss 中我們可以不直接導入 a.scss，我們通過導入 b.scss 也可以實現(xiàn)，c.scss 中的代碼如下所示：

// c.scss
@use "b";
li {
	// 應用 a.scss 文件中的 mixin
	@include b.bor;
}

從上面的代碼中可以看出來我們可以通過 @forward 來組合多個文件的內(nèi)容，然后提供給其他的樣式中使用，類似于轉發(fā)的功能，同時它還可以控制某些成員的私有訪問等，不過這個一般是寫大型的樣式庫才會用到，在入門教程中我們不做過多的探討。

3.3 @mixin 和 @include

@mixin 我們在之前的 Sass 混合指令章節(jié) 做了詳細的講解，混合指令的出現(xiàn)使你可以定義在樣式表中重復使用的樣式，這可以使你免去編寫過多重復的樣式，而且在混合指令 @mixin 中你也可以做一些邏輯處理。而 @include 是用來引用混合指令的。

3.4 @function

@function 在前面的 Sass 函數(shù)指令章節(jié)中我們也做了詳細的講解，回憶一下，它也叫自定義函數(shù)讓你可以容易的處理各種邏輯和定義復雜的操作，而且你可以在任何需要的地方復用函數(shù)，這使得我們可以抽離出來一些常見的公式或者邏輯。

3.5 @extend

@extend 就是我們說的 Sass 中的繼承，在 Sass 繼承章節(jié)，回憶一下，在我們編寫樣式的時候，很多情況下我們幾個不同的類會有相同的樣式代碼，同時這幾個類又有其自己的樣式代碼，這是我們就可以通過 Sass 提供的繼承 @extend 來實現(xiàn)。

3.6 @error

@error 規(guī)則在此處是第一次講解，它是干嘛用的呢？在編寫 Sass 函數(shù)或者 mixin 的時候，通常需要確保這些能提供正確的類型或者格式，如果沒有的時候需要通知用戶并停止函數(shù)或 mixin 的運行，這時就用到的 @error ，我的理解是它就像我們寫 javascript 時用到的 throw new Error() 。我們舉個簡單的例子看下：

@function my($str) {
	@if $str != 'a' || $str != 'b'  {
		// 此處會拋出錯誤信息并停止函數(shù)的運行
		@error "This is a error！"
	}
}

3.7 @warn

上面我們講了 @error ，@warn 和它的使用方式是相同的，不同的是 @warn 是打印信息，以及指示當前的函數(shù)或 mixin 的調(diào)用堆棧追蹤，并不會停止函數(shù)或 mixin 的運行，它的寫法如下：

@function my($str) {
	@if $str != 'a' || $str != 'b'  {
		// 此處不會停止函數(shù)的運行
		@warn "This is a message！"
	}
}

3.8 @debug

一看這個 debug 我們就知道，它是用來調(diào)試的，在 javascript 中也是這樣。在 Sass 中我們可以使用 @debug 來打印表達式的值以及文件名和行號，這僅是在你開發(fā)時期調(diào)試用，對實際的樣式并沒有什么太大的幫助，你只要記住需要調(diào)試 Sass 代碼就用它，不過一般我們在實際的項目中使用它是很少很少的。

3.9 @at-root

回一下前面的章節(jié)中我們講解的 Sass 嵌套，很常用的功能。在使用嵌套的時候你可以使用 @at-root 取消嵌套規(guī)則，我們舉個例子看下：

.a {
  width: 300px;
  .b {
    width: 200px;
  }
  .c {
    width: 100px;
    // 取消嵌套規(guī)則
    @at-root .f {
      width: 20px;
    }
  }
  // 取消嵌套規(guī)則
  @at-root .e {
    width: 50px;
  }
}

上面這段代碼將會被轉換為如下的 CSS 代碼：

.a {
  width: 300px;
}
.a .b {
  width: 200px;
}
.a .c {
  width: 100px;
}
.f {
  width: 20px;
}

.e {
  width: 50px;
}

通過上面的代碼我們可以看出來，在 .f 和 .e 處我使用了 @at-root ，那么就不會對它們倆應用嵌套規(guī)則，@at-root 的使用場景視情況而定，靈活使用。

3.10 控制規(guī)則

控制規(guī)則其實就是我們前面章節(jié)講的 Sass 控制指令，它們包括 @if 、@each、@for 和 @while，它們的功能在前面的章節(jié)我們已經(jīng)做了詳細的講解，此處我們回憶一下，它們一般用于判斷和循環(huán)的邏輯，用來對你的邏輯代碼進行流控制。

3.11 CSS @-Rule

在 CSS 中也有很多以 @ 開頭的規(guī)則，比如 @media 、@font-face 、 @keyframes 等等，Sass 支持所有的 CSS 規(guī)則，所以在編寫 Sass 的時候你可以放心的編寫 CSS 中的規(guī)則。

4. 小結

本節(jié)內(nèi)容我們對 Sass 中所有的 @-Rules 進行了梳理，這其中有很多都是我們前邊章節(jié)講過的，利用單獨章節(jié)講解的規(guī)則是很重要也很常用的，它們分別是用于邏輯控制的控制指令（@if 、@each、@for、@while）、用于定義一些邏輯代碼的混合指令（@mixin）和函數(shù)指令（@function）、用于樣式復用的繼承（@extend）、用于文件復用的導入（@use、@import），這些是很常用也很重要的！通過下圖來回憶一下這些 Rlues 吧：

另外我們在本節(jié)還介紹了一些不是很常用的 Sass 規(guī)則，如用于調(diào)試的 @debug 、用于信息或錯誤拋出的 @warn 和 @error，還有用于取消嵌套規(guī)則的 @at-root。另外需要記住的是 CSS 中所有的規(guī)則 Sass 都是支持的。這些規(guī)則會隨著你編寫項目的增多越來越熟悉，在不同的項目中要學會對這些規(guī)則靈活地使用。