Sass 基本介紹

[toc]

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

Sass 是 CSS 的超集，支持所有 css 語(yǔ)法，并在其基礎(chǔ)上擴(kuò)展。

Sass 支持像 css 一樣的大括號(hào)語(yǔ)法，文件擴(kuò)展名為 .scss ，以及另一種使用縮進(jìn)的語(yǔ)法，文件擴(kuò)展名為 .sass 。

教程主要采取完全兼容 css 的 SCSS 語(yǔ)法。

注釋（Comments）

支持兩種注釋，分別是：

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

單行注釋（Single-line comments）

編譯的時(shí)候會(huì)直接被忽略，不會(huì)編譯到 CSS 中，所以也叫做“隱式注釋”（silent comments）。

// 注釋內(nèi)容

多行注釋（Multi-line comments）

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

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

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

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

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

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

編譯后的 css：

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

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

/*! 這行注釋即使在壓縮模式下也會(huì)編譯到 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中很常用，但是它的語(yǔ)法與其他函數(shù)不同，它可以接受帶引號(hào)的 url ，也可以接受不帶引號(hào)的 url。因?yàn)槲醇右?hào)的 URL 不是有效的 SassScript 表達(dá)式，所以 Sass 需要特殊的邏輯來解析它。

如果 url() 的參數(shù)是一個(gè)有效的無(wú)引號(hào)的 url ，Sass 會(huì)原樣解析它，當(dāng)然，插值也是可以用的。

如果參數(shù)不是一個(gè)有效的無(wú)引用的 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ī)范中定義的。因?yàn)?calc() 的數(shù)學(xué)表達(dá)式與 Sass 的算法沖突，而 element() 的id可以被解析為顏色，所以它們需要特殊的解析。

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

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

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

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

`min()` 和 `max()`

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

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

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

"純CSS "包括嵌套調(diào)用 calc() ， env() ， var() ， min() ，或 max() ，以及插值。

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

變量

在 Sass 中，聲明變量必須以 $ 開頭。

$red: #f00;

div {
  color: $red;
}

編譯后的 css ：

div {
  color: #f00;
}

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

Sass 變量會(huì)被編譯成真實(shí)的值然后輸出為 css ，也就是僅僅存在于開發(fā)階段。
CSS 變量對(duì)于不同的元素可以有不同的值，但是 Sass 變量一次只有一個(gè)值。
Sass 變量是不可逆的，這意味著如果您使用了一個(gè)變量，然后在后面更改了它的值，那么之前的使用將依然保持不變。CSS 變量是聲明性的，這意味著如果在后面更改了值，它將影響前面的使用和以后的使用。

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

默認(rèn)值

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

為了實(shí)現(xiàn)這一點(diǎn)，Sass 提供了 !default 標(biāo)志。只有當(dāng)變量沒有定義或者它的值為 null 時(shí)，才會(huì)給該變量賦值。否則，將使用默認(rèn)的值。

配置模塊變量

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

在模塊中聲明變量，并定義默認(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;
}

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

// index.scss

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

內(nèi)置變量

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

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

@use "sass:math" as math;

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

作用域

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

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

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

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

  color: $red;
}

p {
  // 在這里引用局部變量編譯時(shí)會(huì)報(bào)錯(cuò)
  color: $black;
}

當(dāng)局部變量和全局變量重名時(shí)，不會(huì)覆蓋全局變量，而是同時(shí)存在，在哪個(gè)作用域訪問的就是哪個(gè)變量。

$red: #f00;

div {
  $red: #f55;

  color: $red;
}

p {
  color: $red;
}

編譯后的 css ：

div {
  color: #f55;
}

p {
  color: #f00;
}

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

$red: #f00;

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

  color: $red;
}

p {
  color: $red;
}

div {
  color: #f55;
}

p {
  color: #f55;
}

注意：如果使用 !global 的變量不是一個(gè)全局變量，則編譯時(shí)會(huì)報(bào)錯(cuò)。

在流程控制語(yǔ)句（@if/@each/@for/@while 等）中聲明的變量有一個(gè)自己的特殊作用域，它不會(huì)創(chuàng)建新變量去覆蓋同級(jí)作用域中的同名變量，而是簡(jiǎn)單地進(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;
}

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

檢測(cè)變量是否存在

Sass 核心庫(kù)提供了兩個(gè)用于處理變量的高級(jí)函數(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
}

用戶有時(shí)可能會(huì)希望使用插值來定義基于另一個(gè)變量的變量名。Sass 不允許這樣做，因?yàn)樗沟梦覀兒茈y一眼就知道哪些變量在哪里定義。但是，您可以做的是定義一個(gè)從名稱到值的 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 塊中。

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

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

下面展示部分用法，在選擇器，屬性，繼承，注釋語(yǔ)句中使用插值：

$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 注入到未加引號(hào)的字符串中。這在動(dòng)態(tài)生成名稱(例如動(dòng)畫)或使用斜杠分隔值時(shí)特別有用。

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

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

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

注意：不應(yīng)該使用插值插入數(shù)字。因?yàn)椴逯悼偸欠祷匚醇右?hào)的字符串，返回值并不能進(jìn)一步用于計(jì)算，這也同時(shí)避免了違反 Sass 內(nèi)置的的安全保護(hù)規(guī)則，以確保能夠正確使用單位。

Sass 有強(qiáng)大的單位運(yùn)算，你可以使用它來代替。例如，與其寫 #{$width}px ，不如寫 $width * 1px，或者更好的是，以px開頭聲明 $width變量。這樣，`$ width` 已經(jīng)有單位，你將得到一個(gè)很好的錯(cuò)誤消息，而不是編譯偽造的CSS。

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

@語(yǔ)句（At-Rules）

Sass 在 CSS 之上添加了新的 @ 語(yǔ)句：

@mixin 和 @include 用于復(fù)用大的塊級(jí)樣式
@function 聲明自定義函數(shù)，用于 SassScript 表達(dá)式中
@extend 用于在一個(gè)選擇器中繼承另一個(gè)選擇器的樣式
@at-root 將代碼塊內(nèi)部的樣式編譯到 css 最外層（相當(dāng)于頂級(jí)作用域）
@error 故意使編譯失敗而中斷，并拋出錯(cuò)誤信息
@warn 拋出一條錯(cuò)誤信息但不使編譯程序失敗而中斷
@debug 拋出一條用于 debug 調(diào)試的消息
@if, @each, @for, @while 流程控制語(yǔ)句

`@mixin` and `@include`

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

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

定義 mixin 的語(yǔ)法：

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

// 或

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

使用 mixin 的語(yǔ)法：

@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;
}

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

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

定義一個(gè)參數(shù)默認(rèn)值就像定義一個(gè)變量一樣，參數(shù)名后加一個(gè)冒號(hào)，然后就可以寫默認(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ù)順序必須和定義時(shí)的參數(shù)一一對(duì)應(yīng)。

如果傳遞參數(shù)時(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 的最后一個(gè)參數(shù)名以 ... 結(jié)尾，那么這個(gè)參數(shù)就可以接收傳遞過來的任意數(shù)量的參數(shù)，這個(gè)參數(shù)的值則會(huì)是一個(gè)列表。

@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() 來處理，處理后將返回一個(gè) map 類型的數(shù)據(jù)。

如果沒有將任意參數(shù)傳遞給 meta.keywords() 函數(shù)，那么這個(gè)任意參數(shù)列表就不允許接收帶有關(guān)鍵詞的參數(shù)，編譯程序會(huì)報(bào)錯(cuò)。

@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ù)可以是一個(gè)列表（list），那么，也可以把一個(gè)列表作為任意參數(shù)傳遞，同樣只需要在后面加上 ... 即可。

$font: 16px, 600, #f00;

@include font($font...);

同樣，也可以把一個(gè) 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 還可以接受整個(gè)樣式塊，稱為內(nèi)容塊。

在 mixin 中，在樣式塊中寫一個(gè) @content 來聲明這個(gè)位置接受一個(gè)內(nèi)容塊，傳遞一個(gè)樣式塊給 mixin，這個(gè)樣式塊的內(nèi)容將會(huì)用來替換 @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;
}

可以書寫多個(gè) @content; ，這樣將會(huì)編譯生成多個(gè)接收到的樣式塊。

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

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

使用 `@content 時(shí)傳參

傳參使用 @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)語(yǔ)法的 mixin

縮進(jìn)語(yǔ)法的 Sass 可以使用 = 來定義一個(gè)mixin，然后使用 + 來使用一個(gè) mixin，但很不直觀，不建議使用。

`@at-root`

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

.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 只會(huì)解決普通樣式規(guī)則，其他像是 @media 或 @supports 等將會(huì)被丟掉。

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

除了合法的 @語(yǔ)句的名稱，如 @media 中的 media，還有兩個(gè)特殊的值可以在查詢中使用：

rule 指的是樣式規(guī)則。例如，@at-root (with: rule) 不保留 @ 語(yǔ)句，但保留樣式規(guī)則。
all 指所有 @語(yǔ)句和 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;
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

【Sass/SCSS 官方英文文檔翻譯整理】SCSS 完整自學(xué)中文版教程01_Sass基本介紹

【Sass/SCSS 官方英文文檔翻譯整理】SCSS 完整自學(xué)中文版教程01_Sass基本介紹

Sass 基本介紹

注釋（Comments）

單行注釋（Single-line comments）

多行注釋（Multi-line comments）

SassDoc

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

`url()`

`calc()` 和 `element()`

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

`min()` 和 `max()`

變量

默認(rèn)值

配置模塊變量

內(nèi)置變量

作用域

檢測(cè)變量是否存在

插值（Interpolation）

@語(yǔ)句（At-Rules）

`@mixin` and `@include`

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

關(guān)鍵詞傳參

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

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

傳遞任意參數(shù)

`@content` 樣式塊

使用 `@content 時(shí)傳參

縮進(jìn)語(yǔ)法的 mixin

`@at-root`

解決樣式之外的東西

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

【Sass/SCSS 官方英文文檔翻譯整理】SCSS 完整自學(xué)中文版教程01_Sass基本介紹

Sass 基本介紹

注釋（Comments）

單行注釋（Single-line comments）

多行注釋（Multi-line comments）

SassDoc

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

url()

calc() 和 element()

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

min() 和 max()

變量

默認(rèn)值

配置模塊變量

內(nèi)置變量

作用域

檢測(cè)變量是否存在

插值（Interpolation）

@語(yǔ)句（At-Rules）

@mixin and @include

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

關(guān)鍵詞傳參

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

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

傳遞任意參數(shù)

@content 樣式塊

使用 `@content 時(shí)傳參

縮進(jìn)語(yǔ)法的 mixin

@at-root

解決樣式之外的東西

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

`url()`

`calc()` 和 `element()`

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

`min()` 和 `max()`

`@mixin` and `@include`

`@content` 樣式塊

`@at-root`