Sass 基本介紹

[toc]

如果對本文有任何問題，建議，或者在前端技術(shù)體系方面有任何問題读拆，可以添加我的微信： drylint , 我會盡可能為你解答氯夷，也會拉你進(jìn)入前端技術(shù)進(jìn)階交流群账锹，大家一起進(jìn)步~

Sass 是 CSS 的超集，支持所有 css 語法酗洒，并在其基礎(chǔ)上擴展窗骑。

Sass 支持像 css 一樣的大括號語法，文件擴展名為 .scss 耳鸯，以及另一種使用縮進(jìn)的語法湿蛔，文件擴展名為 .sass 。

教程主要采取完全兼容 css 的 SCSS 語法县爬。

注釋（Comments）

支持兩種注釋阳啥，分別是：

• 單行注釋 // 注釋文字
• 多行注釋 /* 注釋文字 */

單行注釋（Single-line comments）

編譯的時候會直接被忽略，不會編譯到 CSS 中财喳，所以也叫做“隱式注釋”（silent comments）察迟。

// 注釋內(nèi)容

多行注釋（Multi-line comments）

編譯時會將注釋編譯到 css 中，所以也叫做“顯式注釋”（loud comment）

// 這一行注釋不會出現(xiàn)在編譯的 css 中

/* 這一行會出現(xiàn)在編譯的 css 中耳高，除非是在壓縮模式下則不會 */

/* 注釋中還可以包含插值:
 * 1 + 1 = #{1 + 1} */

/*! 這行注釋即使在壓縮模式下也會編譯到 css 中 */

p /* 多行注釋可以寫在任何
   * 允許空白出現(xiàn)的地方 */ .sans {
  font-size: 16px;
}

編譯后的 css：

/* 這一行會出現(xiàn)在編譯的 css 中扎瓶，除非是在壓縮模式下則不會 */

/* 注釋中還可以包含插值:
 * 1 + 1 = 2 */

/*! 這行注釋即使在壓縮模式下也會編譯到 css 中 */
p .sans {
  font-size: 16px;
}

SassDoc

文檔注釋，類似于 jsdoc 泌枪。使用三斜線 /// 聲明概荷。

/// Computes an exponent.
///
/// @param {number} $base
///   The number to multiply by itself.
/// @param {integer (unitless)} $exponent
///   The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent) {
  $result: 1;

  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }

  @return $result;
}

特殊的函數(shù)（Special Functions）

• url()
• xxx

url()

url() 函數(shù)在CSS中很常用，但是它的語法與其他函數(shù)不同碌燕，它可以接受帶引號的 url 误证，也可以接受不帶引號的 url。因為未加引號的 URL 不是有效的 SassScript 表達(dá)式修壕，所以 Sass 需要特殊的邏輯來解析它愈捅。

如果 url() 的參數(shù)是一個有效的無引號的 url ，Sass 會原樣解析它慈鸠，當(dāng)然蓝谨，插值也是可以用的。

如果參數(shù)不是一個有效的無引用的 url 青团，例如像棘，如果它包含變量或函數(shù)調(diào)用，它將被解析為普通的 CSS 函數(shù)調(diào)用壶冒。

$roboto-font-path: "../fonts/roboto";

@font-face {
  // This is parsed as a normal function call that takes a quoted string.
  src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");
}

@font-face {
  // This is parsed as a normal function call that takes an arithmetic
  // expression.
  src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");
}

@font-face {
  // This is parsed as an interpolated special function.
  src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");
}

編譯后的 css ：

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
}

@font-face {
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2");
}

@font-face {
  src: url(../fonts/roboto/Roboto-Regular.woff2) format("woff2");
}

calc() 和 element()

calc() 和 element() 函數(shù)是在 CSS 規(guī)范中定義的缕题。因為 calc() 的數(shù)學(xué)表達(dá)式與 Sass 的算法沖突，而 element() 的id可以被解析為顏色胖腾，所以它們需要特殊的解析烟零。

Sass 允許任何文本出現(xiàn)在這些函數(shù)調(diào)用中瘪松，包括嵌套的圓括號。

除了可以使用插值來注入動態(tài)值會被編譯處理锨阿。其他任何東西都不會被解釋為 SassScript 表達(dá)式進(jìn)行計算宵睦，而是原樣輸出。

progid:...() 和 expression() 棄用

expression() 和以 progid: 開頭的函數(shù)是使用非標(biāo)準(zhǔn)語法的 Internet Explorer 遺留特性墅诡。盡管最近的瀏覽器已經(jīng)不再支持它們壳嚎，但是 Sass 繼續(xù)解析它們以實現(xiàn)向后兼容。

min() 和 max()

CSS在 CSS Values and Units Level 4 中增加了對 min() 和 max() 函數(shù)的支持末早，Safari 很快就采用了它們來支持 iPhoneX 烟馅。

但是 Sass 在很久以前就已經(jīng)有了自己的 min() 和 max() 函數(shù)，為了向后兼容所有現(xiàn)有的樣式表然磷。這就需要額外的句法技巧來實現(xiàn)郑趁。

如果一個 min() 或 max() 函數(shù)調(diào)用是有效的純 CSS ，它將被編譯為普通的 CSS 的 min() 或 max() 函數(shù)調(diào)用姿搜。

"純CSS "包括嵌套調(diào)用 calc() 寡润， env() ， var() 舅柜， min() 梭纹，或 max() ，以及插值致份。

但是变抽，只要調(diào)用的時候包含了 SassScript 特性(如變量或函數(shù)調(diào)用)，它就會被認(rèn)為是對 Sass 自帶的 min() 或 max() 函數(shù)的調(diào)用知举。

變量

在 Sass 中瞬沦，聲明變量必須以 $ 開頭太伊。

$red: #f00;

div {
  color: $red;
}

編譯后的 css ：

div {
  color: #f00;
}

Sass 變量和 css 變量的區(qū)別：

• Sass 變量會被編譯成真實的值然后輸出為 css 雇锡，也就是僅僅存在于開發(fā)階段。

• CSS 變量對于不同的元素可以有不同的值僚焦，但是 Sass 變量一次只有一個值锰提。

• Sass 變量是不可逆的，這意味著如果您使用了一個變量芳悲，然后在后面更改了它的值立肘，那么之前的使用將依然保持不變。CSS 變量是聲明性的名扛，這意味著如果在后面更改了值谅年，它將影響前面的使用和以后的使用。

注意：和所有的 Sass 標(biāo)識符一樣肮韧，Sass 變量將連字符 - 和下劃線 _ 視為相同的字符融蹂。這意味著 $font-size 和 $font_size 都指向同一個變量旺订。這是 Sass 早期的歷史遺留，當(dāng)時它只允許在標(biāo)識符名稱中使用下劃線超燃。后來区拳， Sass 增加了對連字符的支持，以匹配 CSS 的語法意乓，sass 將這兩個字符視為等效處理樱调，以便于使遷移更加容易。

默認(rèn)值

比如開發(fā)一個庫届良，用戶可以選擇是否傳遞自定義的值笆凌，如果沒有傳遞則使用默認(rèn)值。

為了實現(xiàn)這一點伙窃，Sass 提供了 !default 標(biāo)志菩颖。只有當(dāng)變量沒有定義或者它的值為 null 時，才會給該變量賦值为障。否則晦闰，將使用默認(rèn)的值。

配置模塊變量

用 !default 定義的變量鳍怨，可以在使用 @use 規(guī)則加載模塊時配置呻右。

在模塊中聲明變量，并定義默認(rèn)值：

// _library.scss

$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

在引用模塊時鞋喇，選擇要自定義值的變量声滥，忽略的變量則使用默認(rèn)值：

// index.scss

@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

內(nèi)置變量

內(nèi)置模塊定義的變量是無法被修改的。

比如侦香，下面代碼視圖修改內(nèi)置變量落塑，但不會成功：

@use "sass:math" as math;

// This assignment will fail.
math.$pi: 0;

作用域

在 css 文件頂層聲明的變量是全局變量，聲明后可以在模塊中的任何地方被訪問罐韩。

在塊（{}）中聲明的變量是局部變量憾赁，只能在聲明它們的塊內(nèi)訪問。

// 全局變量
$red: #f00;

div {
  // 局部變量
  $black: #000;

  color: $red;
}

p {
  // 在這里引用局部變量編譯時會報錯
  color: $black;
}

當(dāng)局部變量和全局變量重名時散吵，不會覆蓋全局變量龙考，而是同時存在，在哪個作用域訪問的就是哪個變量矾睦。

$red: #f00;

div {
  $red: #f55;

  color: $red;
}

p {
  color: $red;
}

編譯后的 css ：

div {
  color: #f55;
}

p {
  color: #f00;
}

如果想用一個局部變量去覆蓋全局變量晦款，也就是在塊中修改全局變量的值，可以使用 !global 來完成：

$red: #f00;

div {
  // !global 將修改全局變量的值枚冗，而不是在塊中新建一個局部作用域
  $red: #f55 !global;

  color: $red;
}

p {
  color: $red;
}

div {
  color: #f55;
}

p {
  color: #f55;
}

注意：如果使用 !global 的變量不是一個全局變量缓溅，則編譯時會報錯。

在流程控制語句（@if/@each/@for/@while 等）中聲明的變量有一個自己的特殊作用域赁温，它不會創(chuàng)建新變量去覆蓋同級作用域中的同名變量坛怪，而是簡單地進(jìn)行原變量的賦值修改操作州藕。

$dark-theme: true;
$red: #e55;
$black: #333;

@if $dark-theme {
  $red: #f00;
  $black: #000;
}

.button {
  background-color: $red;
  color: $black;
}

編譯后的 css ：

.button {
  background-color: #f00;
  color: #000;
}

在流程控制語句中，賦值給已經(jīng)存在的變量則是修改操作酝陈，如果是不存在的變量則會創(chuàng)建一個新的變量床玻，但這個新的變量也只能在這個流程控制語句的作用域中使用。

檢測變量是否存在

Sass 核心庫提供了兩個用于處理變量的高級函數(shù)沉帮。meta.variable-exists() 函數(shù)返回給定名稱的變量是否在當(dāng)前作用域中存在锈死， meta.global-variable-exists() 函數(shù)做同樣的事情，但僅用于全局作用域穆壕。

@debug meta.variable-exists("var1"); // false

$var1: value;

@debug meta.variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;

  @debug meta.variable-exists("var2"); // true
}

@debug meta.global-variable-exists("var1"); // false

$var1: value;

@debug meta.global-variable-exists("var1"); // true

h1 {
  // $var2 is local.
  $var2: value;

  @debug meta.global-variable-exists("var2"); // false
}

用戶有時可能會希望使用插值來定義基于另一個變量的變量名待牵。Sass 不允許這樣做，因為它使得我們很難一眼就知道哪些變量在哪里定義喇勋。但是缨该，您可以做的是定義一個從名稱到值的 map，然后您可以使用變量訪問該映射川背。

@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

編譯后的 css ：

.alert {
  background-color: #ffc107;
}

插值（Interpolation）

插值幾乎可以在 Sass 樣式表的任何地方使用贰拿，以將 SassScript 表達(dá)式的結(jié)果嵌入到 CSS 塊中。

在 #{} 中放置一個表達(dá)式即可熄云，比如可以用在：

• 選擇器
• 屬性名
• 自定義屬性值
• CSS 的 @ 語句中
• @extends
• CSS @imports
• 字符串
• 特殊函數(shù)
• CSS 函數(shù)名
• 保留注釋（Loud comments ） /* ... */

下面展示部分用法膨更，在選擇器，屬性缴允，繼承荚守，注釋語句中使用插值：

$selector: "hello";
$color: "color";

/* selector: #{$selector} */
.#{$selector} {
  background-#{$color}: #f00;
}

.#{$selector}-2 {
  @extend .#{$selector};

  border-#{$color}: #f00;
}

/* selector: hello */
.hello,
.hello-2 {
  background-color: #f00;
}

.hello-2 {
  border-color: #f00;
}

在 SassScript 中，可以使用插值表達(dá)式將 SassScript 注入到未加引號的字符串中练般。這在動態(tài)生成名稱(例如動畫)或使用斜杠分隔值時特別有用矗漾。

注意： SassScript 中的插值永遠(yuǎn)返回一個未加引號的字符串，在上面的例子中已經(jīng)看到了薄料。

插值對于將值注入到字符串中很有用敞贡，但除此之外，在 SassScript 表達(dá)式中很少需要插值都办。

比如嫡锌，使用變量完全不需要這樣寫： color: #{$red} 虑稼，而是可以直接使用變量： color: $red 琳钉。

注意：不應(yīng)該使用插值插入數(shù)字。因為插值總是返回未加引號的字符串蛛倦，返回值并不能進(jìn)一步用于計算歌懒，這也同時避免了違反 Sass 內(nèi)置的的安全保護(hù)規(guī)則，以確保能夠正確使用單位溯壶。

Sass 有強大的單位運算及皂，你可以使用它來代替甫男。例如，與其寫 #{$width}px 验烧，不如寫 $width * 1px板驳，或者更好的是，以px開頭聲明width` 已經(jīng)有單位，你將得到一個很好的錯誤消息感混，而不是編譯偽造的CSS端幼。

還有，雖然可以使用插值將帶引號的字符串轉(zhuǎn)換為不帶引號的字符串弧满，但使用 string.unquote() 函數(shù)會更清楚婆跑。所以應(yīng)該用 string.unquote($string) 來代替 #{$string}。

@語句（At-Rules）

Sass 在 CSS 之上添加了新的 @ 語句 ：

• @mixin 和 @include 用于復(fù)用大的塊級樣式

• @function 聲明自定義函數(shù)庭呜，用于 SassScript 表達(dá)式中

• @extend 用于在一個選擇器中繼承另一個選擇器的樣式

• @at-root 將代碼塊內(nèi)部的樣式編譯到 css 最外層（相當(dāng)于頂級作用域）

• @error 故意使編譯失敗而中斷滑进，并拋出錯誤信息

• @warn 拋出一條錯誤信息但不使編譯程序失敗而中斷

• @debug 拋出一條用于 debug 調(diào)試的消息

• @if, @each, @for, @while 流程控制語句

@mixin and @include

@mixin 用于定義要復(fù)用的樣式塊，@include 用于調(diào)用這些樣式塊募谎。

因歷史遺留原因郊供，mixin 的名字和 Sass 標(biāo)識符一樣，連字符（hyphens） - 和下劃線（underscores）_ 被視為完全相同近哟。

定義 mixin 的語法：

// 不需要傳參數(shù)時驮审，復(fù)用固定的樣式代碼
@mixin <name> {
  // ...
}

// 或

// 需要使用時傳遞參數(shù)，動態(tài)復(fù)用樣式代碼
@mixin name(arg1, arg2, ..., argN) {
  // ...
}

使用 mixin 的語法：

@include <name>;

// 或

@include <name>(arg1, arg2, ...)

使用示例：

// a.scss

@mixin input {
  padding: 10px;
  color: #333;
}

@mixin button ($color, $fontSize) {
  color: $color;
  font-size: $fontSize;
}

@use "a";

.input {
  @include a.input;
}

.button {
  @include a.button(#333, 20px);
}

編譯后的 css ：

.input {
  padding: 10px;
  color: #333;
}

.button {
  color: #333;
  font-size: 20px;
}

通常情況下吉执，如果一個 mixin 定義時有多少個參數(shù)疯淫，那么在調(diào)用時必須傳遞相同數(shù)量的參數(shù)，除非是定義 mixin 時使用了參數(shù)默認(rèn)值戳玫。

mixin 參數(shù)默認(rèn)值

定義一個參數(shù)默認(rèn)值就像定義一個變量一樣熙掺，參數(shù)名后加一個冒號，然后就可以寫默認(rèn)值了咕宿。

@mixin button ($color, $fontSize: 16px) {
  color: $color;
  font-size: $fontSize;
}

.button {
  @include button(#f00);
}

編譯后的 css ：

.button {
  color: #f00;
  font-size: 16px;
}

默認(rèn)參數(shù)值可以是任意 Sass 表達(dá)式币绩，甚至是它前面的參數(shù)。

@mixin font ($size, $weight: if($size >= 24px, 600, 400)) {
  font-size: $size;
  font-weight: $weight;
}

.div1 {
  @include font(16px);
}

.div2 {
  @include font(24px);
}

編譯后的 css ：

.div1 {
  font-size: 16px;
  font-weight: 400;
}

.div2 {
  font-size: 24px;
  font-weight: 600;
}

關(guān)鍵詞傳參

默認(rèn)情況下府阀，調(diào)用 mixin 時傳遞的參數(shù)順序必須和定義時的參數(shù)一一對應(yīng)缆镣。

如果傳遞參數(shù)時指定參數(shù)關(guān)鍵詞，則可以不按照定義的順序來傳參试浙。

@mixin font ($weight, $size) {
  font-size: $size;
  font-weight: $weight;
}

.div1 {
  @include font($size: 16px, $weight: 500);
}

編譯后的 css ：

.div1 {
  font-size: 16px;
  font-weight: 500;
}

注意董瞻，如果要傳遞不帶關(guān)鍵詞的參數(shù)，則它必須出現(xiàn)在關(guān)鍵詞參數(shù)之前田巴。

任意數(shù)量的參數(shù)

如果 mixin 的最后一個參數(shù)名以 ... 結(jié)尾钠糊，那么這個參數(shù)就可以接收傳遞過來的任意數(shù)量的參數(shù)挟秤，這個參數(shù)的值則會是一個列表。

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

編譯后的 css ：

input.name {
  position: absolute;
  height: 150px;
  margin-top: 0;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}

帶有關(guān)鍵字的任意參數(shù)

如果調(diào)用 mixin 帶了關(guān)鍵字抄伍，那么任意參數(shù)需要使用 meta.keywords() 來處理艘刚，處理后將返回一個 map 類型的數(shù)據(jù)。

如果沒有將任意參數(shù)傳遞給 meta.keywords() 函數(shù)截珍，那么這個任意參數(shù)列表就不允許接收帶有關(guān)鍵詞的參數(shù)昔脯，編譯程序會報錯。

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

傳遞任意參數(shù)

接收的任意參數(shù)可以是一個列表（list）笛臣，那么云稚，也可以把一個列表作為任意參數(shù)傳遞，同樣只需要在后面加上 ... 即可沈堡。

$font: 16px, 600, #f00;

@include font($font...);

同樣静陈，也可以把一個 map 作為任意參數(shù)傳遞：

@mixin font ($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

$font: (
  weight: 600,
  size: 16px,
);

.div1 {
  @include font($font...);
}

編譯后的 css ：

.div1 {
  font-size: 16px;
  font-weight: 600;
}

@content 樣式塊

除了接受參數(shù)之外，mixin 還可以接受整個樣式塊诞丽，稱為內(nèi)容塊鲸拥。

在 mixin 中，在樣式塊中寫一個 @content 來聲明這個位置接受一個內(nèi)容塊僧免，傳遞一個樣式塊給 mixin刑赶，這個樣式塊的內(nèi)容將會用來替換 @content 。

@mixin font ($size, $weight) {
  font-size: $size;
  font-weight: $weight;
  @content;
}

$font: (
  weight: 600,
  size: 16px,
);

.div1 {
  @include font($font...) {
    font-family: sans-serif;
  }
}

編譯后的 css ：

.div1 {
  font-size: 16px;
  font-weight: 600;
  font-family: sans-serif;
}

可以書寫多個 @content; 懂衩，這樣將會編譯生成多個接收到的樣式塊撞叨。

傳遞的樣式塊是有作用域限制的，只能訪問樣式塊所處的位置的變量浊洞，而不能去訪問 mixin 定義的作用域的變量牵敷。

如果要讓樣式塊使用 mixin 定義的作用域的變量，則需要通過 @content() 傳遞給樣式塊法希。

使用 `@content 時傳參

傳參使用 @content(arg1, arg2, ...) 枷餐，接收使用 @include <name> using ($arg1, $arg2, ...)

@mixin font ($size, $weight) {
  font-size: $size;
  font-weight: $weight;
  @content(#f00, $size * 2);
}

$font: (
  weight: 600,
  size: 16px,
);

.div1 {
  @include font($font...) using ($color, $margin) {
    font-family: sans-serif;
    color: $color;
    margin: $margin;
  }
}

編譯后的 css ：

.div1 {
  font-size: 16px;
  font-weight: 600;
  font-family: sans-serif;
  color: #f00;
  margin: 32px;
}

@content() 同樣可以傳遞 list 或 map 類型的參數(shù)，用法和前面一樣苫亦。

縮進(jìn)語法的 mixin

縮進(jìn)語法的 Sass 可以使用 = 來定義一個mixin毛肋，然后使用 + 來使用一個 mixin，但很不直觀屋剑，不建議使用润匙。

@at-root

通常用于嵌套的選擇器中，在選擇器前寫下 @at-root 語句饼丘，用于將該選擇器編譯到樣式表的最外層趁桃，而不是嵌套所在的位置辽话。

.div1 {
  color: #f00;
  .div2 {
    color: #0f0;

    // 將 .div3 編譯到最外層
    @at-root .div3 {
      color: #00f;
    }
  }
}

編譯后的 css ：

.div1 {
  color: #f00;
}
.div1 .div2 {
  color: #0f0;
}
.div3 {
  color: #00f;
}

結(jié)合 mixin 來使用：

@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    font-size: 16px;
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    color: #f00;
  }

  @include unify-parent("select") {
    color: #0f0;
  }
}

編譯后的 css ：

.wrapper input.field {
  font-size: 16px;
  color: #f00;
}

.wrapper select.field {
  font-size: 16px;
  color: #0f0;
}

@at-root 還有另一種寫法 @at-root { ... }：

.div1 {
  font-size: 16px;

  @at-root {
    .div2 {
      color: #f00;
    }
    .div3 {
      color: #0f0;
    }
  }
}

編譯后的 css ：

.div1 {
  font-size: 16px;
}
.div2 {
  color: #f00;
}

.div3 {
  color: #0f0;
}

解決樣式之外的東西

默認(rèn)情況下肄鸽， @at-root 只會解決普通樣式規(guī)則卫病， 其他像是 @media 或 @supports 等將會被丟掉。

使用 @at-root (with: <rules...>) { ... } 或 @at-root (without: <rules...>) 來告訴 Sass 在編譯的時候是否包括一些指定的規(guī)則典徘。

除了合法的 @語句的名稱蟀苛，如 @media 中的 media，還有兩個特殊的值可以在查詢中使用：

• rule 指的是樣式規(guī)則逮诲。例如帜平，@at-root (with: rule) 不保留 @ 語句，但保留樣式規(guī)則梅鹦。
• all 指所有 @語句 和 style 規(guī)則裆甩。

@media screen and (min-width: 900px) {
  .page {
    width: 100px;

    @at-root (with: media) {
      /* @at-root (with: media) */
      .div1 {
        font-size: 16px;
      }
    }

    @at-root (without: media) {
      .div2 {
        /* @at-root (without: media) */
        color: #111;
      }
    }

    @at-root (with: rule) {
      .div3 {
        /* @at-root (with: rule) */
        color: #111;
      }
    }

    @at-root (without: rule) {
      .div4 {
        /* @at-root (without: rule) */
        color: #111;
      }
    }

    @at-root (with: all) {
      .div5 {
        /* @at-root (with: all) */
        color: #111;
      }
    }

    @at-root (without: all) {
      .div6 {
        /* @at-root (without: all) */
        color: #111;
      }
    }
  }
}

編譯后的 css ：

@media screen and (min-width: 900px) {
  .page {
    width: 100px;
  }

  /* @at-root (with: media) */
  .div1 {
    font-size: 16px;
  }
}
.page .div2 {
  /* @at-root (without: media) */
  color: #111;
}
.page .div3 {
  /* @at-root (with: rule) */
  color: #111;
}

@media screen and (min-width: 900px) {
  .div4 {
    /* @at-root (without: rule) */
    color: #111;
  }
}

@media screen and (min-width: 900px) {
  .page .div5 {
    /* @at-root (with: all) */
    color: #111;
  }
}
.div6 {
  /* @at-root (without: all) */
  color: #111;
}