前言

Sass 有三個(gè)版本 Dart Sass颠区、libsass 和 Ruby Sass：

• Dart Sass：用 Dart 語言寫的 sass 實(shí)現(xiàn)，于2016年11月1日發(fā)布 alpha 版本黔夭，版本1.23.0之后完全支持模塊化機(jī)制讯检。
• libSass 也就是俗稱的 node-sass，用 c/c++ 實(shí)現(xiàn)的 sass 版本韩玩，使用廣泛枪蘑，其中 node-sass 是綁定了 libsass的 nodejs 庫损谦，可以極快的將 .scss 文件編譯為 .css 文件，安裝過程很慢腥寇，官方也不推薦再使用了成翩。
• Ruby Sass 是最初的 Sass 實(shí)現(xiàn)觅捆，但是2019年3月26日被停止了赦役，以后也不會(huì)再支持，使用者需要遷移到別的實(shí)現(xiàn)上

Sass 官方團(tuán)隊(duì)在2020年10月也正式宣布 Libsass 將棄用栅炒，以及基于它的 Node Sass 和 SassC掂摔，并且建議用戶使用 Dart Sass，主要有以下幾點(diǎn)說明：

• 不再建議將 LibSass 用于新的 Sass 項(xiàng)目赢赊， 改為使用 Dart Sass乙漓。
• 建議現(xiàn)有的 LibSass 用戶制定計(jì)劃，最終遷移到 Dart Sass释移，并且所有 Sass 庫都制定計(jì)劃叭披，最終放棄對 LibSass 的支持。
• 不再計(jì)劃向 LibSass 添加任何新功能玩讳，包括與新 CSS 功能的兼容性涩蜘。
• LibSass 和 Node Sass 將在盡力而為的基礎(chǔ)上無限期維護(hù)，包括修復(fù)主要的錯(cuò)誤和安全問題以及與最新的 Node 版本兼容熏纯。

為什么使用 Dart Sass

目前 Dart Sass 已經(jīng)作為 Sass 最新的版本了同诫，當(dāng)執(zhí)行 npm install sass -D 默認(rèn)使用的是 Dart Sass 包，vue-cli樟澜、Vite 腳手架默認(rèn)也是使用最新版本 Dart sass误窖，而且不需要安裝 node-sass【之前安裝 node-sass 經(jīng)常失敗】

另外，element-plus 組件庫也是使用 dart dass 模塊的 sass:map 和 @use 重構(gòu)了所有的 SCSS 變量秩贰，解決了由 @import 造成的重復(fù)輸出問題霹俺。

所以，為了獲得 sass 提供更多更強(qiáng)大的功能毒费，強(qiáng)烈推薦使用 dart sass

安裝使用

如果之前安裝了 node-sass丙唧，可以先卸載

npm uninstall node-sass

安裝 dart-sass

npm install sass sass-loader@^10.1.1 -D

注意：之前安裝 sass-loader 版本是 13.0+，版本過高導(dǎo)致報(bào)錯(cuò)蝗罗，提示 TypeError: this.getOptions is not a function艇棕，退回 10.+ 可以運(yùn)行成功

如果項(xiàng)目之前用到 /deep/ 需要替換為 ::v-deep蝌戒，全局搜索 /deep/ , 將項(xiàng)目里的 /deep/ 替換為 ::v-deep

SCSS變量

scss 變量命名規(guī)則

• 以美元符號 $ 開頭，后面跟變量名沼琉；且必須先定義北苟，后使用
• 變量名不能以數(shù)字開頭，可包含字母打瘪、數(shù)字友鼻、下劃線、橫線（連接符）
• 通過連接符 - 與下劃線 _ 定義的同名變量為同一變量
• 寫法同 css闺骚，即變量名和值之間用冒號 : 分隔

$color:#F00;
p {
    color: $color;
}

編譯為

p {
    color: #F00;
}

SCSS 變量有兩種作用域：全局變量域和局部變量域

• 全局變量：聲明在最外層的變量彩扔，可在任何地方使用；或在局部變量添加 !global 聲明
• 局部變量：嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用

$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global; // 全局變量僻爽，外部可以使用
    font-size: $font-size;
    color: $color;
    height: $height;
}
.footer {
    /**$font-size使用!global 申明成全局變量了*/
    font-size: $font-size; 
    /**
    * Error: Undefined variable. 
    * $height是.container下的局部變量虫碉，無法在.footer下面編譯
    */
    height:$height;
}

編譯 css

.container {
    font-size: 16px;
    color: red;
    height: 500px;
}

.footer {
     /**$font-size使用!global 申明成全局變量了*/
    font-size: 16px;
}

CSS 變量

Sass 默認(rèn)支持css變量，通過 scss 變量 和 css 變量管理可以很容易實(shí)現(xiàn)換膚胸梆，element-plus 是這樣實(shí)現(xiàn)的

css 變量 聲明一個(gè)自定義屬性敦捧，屬性名需要以兩個(gè)減號（--）開始，定義變量 --變量名:變量值 例如： --main-color: black;碰镜，由 var() 函數(shù)來獲取值兢卵，例如 color: var(--main-color)

:root {
    --main-color: #F00;
}
p {
    color: var(--main-color);
}

:root 是在 HTML 文檔的任何地方都可以訪問到它

注意： 自定義屬性名是大小寫敏感的，--my-color 和 --My-color 會(huì)被認(rèn)為是兩個(gè)不同的自定義屬性

通過 JavaScript 獲取或者修改 CSS 變量和操作普通 CSS 屬性是一樣

// 獲取一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
element.style.getPropertyValue("--my-var");

// 獲取任意 Dom 節(jié)點(diǎn)上的 CSS 變量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一個(gè) Dom 節(jié)點(diǎn)上的 CSS 變量
element.style.setProperty("--my-var", jsVar + 4);

SCSS 數(shù)據(jù)類型

• 數(shù)字：1rem绪颖、2vh秽荤、13、 10px柠横；
• 字符串：分有引號字符串與無引號字符串窃款，"foo"、 'bar'滓鸠、baz雁乡；
• 顏色：blue, #04a3f9, rgba(255,0,0,0.5)；
• 布爾型：true 和 false糜俗；
• 空值：null 是其類型的唯一值踱稍。表示缺少值，通常由函數(shù)返回以表示缺少結(jié)果悠抹；
• 數(shù)組 (list)：用空格或逗號作分隔符珠月，1.5em 1em 0； 2em,Helvetica,Arial,sans-serif楔敌；
• maps：相當(dāng)于 JavaScript 的 object 對象啤挎，格式括號包裹鍵值對，逗號隔開 (key1: value1, key2: value2)

// 數(shù)字
$layer-index: 10;
$border-width: 3px;

// 字符串
$font-weight: bold;

// 數(shù)組
$font-base-family: "Open Sans", Helvetica, Sans-Serif;
$block-base-padding: 6px 10px 6px 10px;

// 顏色
$top-bg-color: rgba(255, 147, 29, 0.6);

// 布爾值
$blank-mode: true;

// null
$var: null;

// maps 值
$fonts: (
  serif: "Helvetica Neue",
  monospace: "Consolas",
);

.container {
  // 內(nèi)部變量
  font-family: $font-base-family;
  font-size: $font-size;
  padding: $block-base-padding;

  @if $blank-mode {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

  content: type-of($var);
  content: length($var);
  color: $top-bg-color;
}

// 如果列表中包含空值，則生成的CSS中將忽略該空值庆聘。
.wrap {
  font: 18px $font-weight map-get($fonts, "sans");
}

!default

可以在變量的結(jié)尾添加 !default 來給變量設(shè)置默認(rèn)值胜臊，有點(diǎn)類似 Javascript 的邏輯運(yùn)算符 let content=value || "default value" 。注意伙判，變量是 null 時(shí)將視為未被 !default 賦值

// 如果$content之前沒使用 !default象对，沒辦法賦值覆蓋
$content: "First content";
$content: "Second content" !default;
#main {
    content: $content;
}

編譯成 css

#main {
  content: "First content";
}

插值語句

通過 #{} 插值語句可以在選擇器、屬性名宴抚、注釋中使用變量勒魔，使用 #{} 插值語句將變量包裹起來即可，和 js 中的 模板字符串 很像

$font-size: 12px;
$line-height: 30px;
$class-name: danger;
$attr: color;
$author: "福大命大";

p {
    font: #{$font-size}/#{$line-height} Arial Helvetica, sans-serif;
}

/* 
* 這是文件的說明部分
* @author: #{$author}
*/

a.#{$class-name} {
    border-#{$attr}: #f00;
}

編譯為css

p {
    font: 12px/30px Arial Helvetica, sans-serif;
}

/* 
* 這是文件的說明部分
* @author: 福大命大
*/
a.danger {
    border-color: #f00;
}

條件語句 @if

@if 語法和 js 類似菇曲，基本格式是 @if...冠绢、@else if...、@else

$theme:3;
.container {
    @if $theme >= 5 {
        background-color: red;
    }
    @else {
        background-color: blue;
    }
}

編譯為 css

.container {
    background-color: blue;
}

@for 循環(huán)

for 在條件范圍內(nèi)重復(fù)操作常潮，這個(gè)指令包含兩種格式：

• @for $var from start through end
• @for $var from start to end

兩者區(qū)別在于 through 與 to 的含義

• 使用 through 時(shí)弟胀，條件范圍包含 start 與 end 的值；
• 使用 to 時(shí)條件范圍只包含 start 的值不包含 end 的值蕊玷；

$var 可以是任何變量邮利，比如 $i弥雹，start 和 end 必須是整數(shù)值垃帅。

@for $i from 1 to 3 {
  #loading span:nth-child(#{$i}) {
      width: 20 * ($i - 1) + px;
  }
}

編譯為 css

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}

如果把 to 換成 through

#loading span:nth-child(1) {
    width: 0px;
}

#loading span:nth-child(2) {
    width: 20px;
}

#loading span:nth-child(3) {
    width: 40px;
}

@each 循環(huán)

@each 指令的格式是 @each $var in $list , $var 可以是任何變量名，比如 $length 或者 $name剪勿，而 $list 是一連串的值贸诚，也就是值列表

$color-list:red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index - 1} {
        background-color: $color;
    }
}

編譯為 css

.p0 {
    background-color: red;
}

.p1 {
    background-color: green;
}

.p2 {
    background-color: blue;
}

.p3 {
    background-color: turquoise;
}

.p4 {
    background-color: darkmagenta;
}

@while 循環(huán)

@while 指令循環(huán)輸出直到表達(dá)式返回結(jié)果為 false。這樣可以實(shí)現(xiàn)比 @for 更復(fù)雜的循環(huán)厕吉。比如酱固，可以借此生成柵格化布局

$column:12;
@while $column>0 {
   .col-sm-#{$column} {
      width: $column / 12 * 100%;
   }
    $column:$column - 1;
}

編譯為 css

.col-sm-12 {
    width: 100%;
}

.col-sm-11 {
    width: 91.6666666667%;
}

.col-sm-10 {
    width: 83.3333333333%;
}

.col-sm-9 {
    width: 75%;
}

.col-sm-8 {
    width: 66.6666666667%;
}

.col-sm-7 {
    width: 58.3333333333%;
}

.col-sm-6 {
    width: 50%;
}

.col-sm-5 {
    width: 41.6666666667%;
}

.col-sm-4 {
    width: 33.3333333333%;
}

.col-sm-3 {
    width: 25%;
}

.col-sm-2 {
    width: 16.6666666667%;
}

.col-sm-1 {
    width: 8.3333333333%;
}

@import

scss 拓展了 @import 的功能，允許其導(dǎo)入 scss或 sass文件头朱。被導(dǎo)入的文件將合并編譯到同一個(gè) css 文件中运悲，被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用。

common.scss

$color:red;

index.scss

@import "common.scss";
.container {
    border-color: $color;
}

編譯為 css

.container {
  border-color: red;
}

以下情況下项钮，@import 僅作為普通的 css 語句，不會(huì)導(dǎo)入 scss 文件：

• 文件拓展名是 .css ；
• 文件名以 http:// 開頭一也；
• 文件名是 url() 蘑秽；
• @import 包含媒體查詢。

@import "common.css";
@import url(common);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);

scss 允許同時(shí)導(dǎo)入多個(gè)文件亚隙，例如同時(shí)導(dǎo)入 a.scss 與 b.scss 兩個(gè)文件磁餐，不用再單獨(dú)寫個(gè) import 引入

@import "a", "b";

@Partials

如果需要導(dǎo)入 scss 或者 sass 文件，但又不希望將其編譯為 css阿弃，只需要在文件名前添加下劃線诊霹，這樣會(huì)告訴 scss 不要編譯這些文件羞延。
注意：

• 導(dǎo)入語句中不需要添加下劃線；
• 不可以同時(shí)存在添加下劃線與未添加下劃線的同名文件脾还，添加下劃線的文件將會(huì)被忽略

_common.scss

$color:red;

index.scss

@import "common.scss";
.container {
    border-color: $color;
}

編譯為

.container {
  border-color: red;
}

_common.scss 文件不會(huì)編譯成 _common.css 文件肴楷，Partials 主要是用來定義公共樣式的，專門用于被其他的 scss 文件 import 進(jìn)行使用的

@mixin

混合指令（Mixin）用于定義可重復(fù)使用的樣式荠呐∪瑁混合指令可以包含所有的css規(guī)則，絕大部分 scss 規(guī)則泥张，甚至可以通過參數(shù)功能引入變量呵恢，輸出多樣化的樣式；

@mixin 和 @include 配合使用

// 定義一個(gè)區(qū)塊基本的樣式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}
// 使用混入 
.container {
    .block {
        @include block;
    }
}

編譯為 css

.container .block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}

@mixin 可以定義多個(gè)參數(shù)和默認(rèn)值

// 定義塊元素內(nèi)邊距媚创，參數(shù)指定默認(rèn)值
@mixin block-padding($top:0, $right:0, $bottom:0, $left:0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

// 可指定參數(shù)賦值
.container {
    /** 不帶參數(shù) */
    @include block-padding;
    /** 按順序指定參數(shù)值 */
    @include block-padding(10px,20px);
    /** 給指定參數(shù)指定值 */
    @include block-padding($left: 10px, $top: 20px)
}

編譯 CSS

.container {
    /** 不帶參數(shù) */
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    /** 按順序指定參數(shù)值 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 0;
    padding-left: 0;
    /** 給指定參數(shù)指定值 */
    padding-top: 20px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

可變參數(shù)：使用 ... 處理參數(shù)不固定的情況渗钉，類似于js中的函數(shù)的剩余參數(shù)

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction, $gradients);
}

.table-data {
    @include linear-gradient(to right, #F00, orange, yellow);
}

編譯為

.table-data {
    background-color: #F00;
    background-image: linear-gradient(to right, #F00, orange, yellow);
}

總結(jié)

• mixin 是可以重復(fù)使用的一組 css 聲明，有助于減少重復(fù)代碼钞钙，只需聲明一次鳄橘，就可在文件中引用；
• 使用參數(shù)時(shí)建議加上默認(rèn)值芒炼；
• @import 導(dǎo)入局部模塊化樣式（類似功能瘫怜、同一組件）；
• @minix 定義的是可重復(fù)使用的樣式

@function 函數(shù)

@function 用于封裝復(fù)雜的操作本刽，可以很容易地以一種可讀的方式抽象出通用公式和行為鲸湃，函數(shù)提供返回值，常用來做計(jì)算方面的工作

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

//change-color和hue是內(nèi)置方法
//hue 返回$color的顏色為0到360度之間的一個(gè)數(shù)字子寓。
//change-color 用于設(shè)置顏色的屬性
@function invert($color, $amount: 100%) {
    //@error hue($color); 調(diào)試 210deg
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
    background-color: invert($primary-color, 80%);
}

編譯 CSS

.header {
    background-color: #523314;
}

可變參數(shù) 看作 js function 的 rest 參數(shù)

@function sum($numbers...) {
    $sum: 0;
    @each $number in $numbers {
        $sum: $sum + $number;
    }
    @return $sum;
}

$widths: 50px, 30px, 100px;
.micro {
    width: sum($widths...);
}

編譯為 CSS

.micro {
    width: 180px;
}

@return 只允許在 @function 內(nèi)使用暗挑，和 js 一樣，遇到 return 就會(huì)返回

總結(jié)

• @function 和 @mixin 參數(shù)的使用方式?jīng)]啥區(qū)別斜友；
• @function 用來計(jì)算炸裆，@mixin 用來封裝樣式，@import 用來抽離他們?yōu)橐粋€(gè)模塊

@extend繼承

以 elementUI 的 el-button 組件為例鲜屏，可以使用 @extend 繼承已經(jīng)存在的樣式烹看，使用逗號選擇器。

// # id選擇器一樣的
.button {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    @extend .button;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    @extend .button;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

編譯成 css

.button, .btn-danger, .btn-default {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

占位符選擇器

占位符選擇器 %墙歪，與常用的 id 與 class 選擇器寫法相似听系，只是 # 或 . 替換成了 %，占位符選擇器必須通過 @extend 指令調(diào)用

.button %base {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}
        
.btn-default {
    @extend %base;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    @extend %base;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

效果和上面的類選擇器一樣虹菲，但是靠胜，他有個(gè)有優(yōu)點(diǎn)，占位符選擇器% 所屬的樣式未使用時(shí)，不會(huì)被編譯到 css 文件中

.button .btn-danger, .button .btn-default {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    user-select: none;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

@use

存在兼容性問題浪漠，僅在 Dart Sass 1.23.0 以上有效陕习，官方文檔有兼容性介紹

css 真正意義上的模塊化，可以從其它 scss 樣式表中加載 mixin址愿、function 和變量该镣，并將來自多個(gè)樣式表的 css 組合在一起。scss 還提供了很多內(nèi)置模塊响谓，我們可以通過 @use 使用损合，官方也推薦使用 @use 替換 @import，后續(xù)會(huì)廢棄 @import

@import缺點(diǎn)

• 多處導(dǎo)入娘纷，存在樣式重復(fù)加載嫁审。
• 沒有命名空間，為了避免撞名赖晶，不敢使用簡寫的 classname律适，因此起名總是需要注意。
• 沒有私有函數(shù)的概念遏插，樣式完全暴露在使用 import 的地方捂贿，這對ui庫不夠友好

@use 使用默認(rèn)帶有命名空間，也可以重命名空間

src/_corners.scss

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

index.scss

@use "src/corners"; // 默認(rèn)命名空間 corners
// @use "src/corners" as c; // 重命名空間
.button {
    @include corners.rounded;
    padding: 5px + corners.$radius;
    // padding: 5px + c.$radius; // 重命名 c 引用
}

as * 讓模塊處于全局命名空間胳嘲，不需要帶上命名空間就可以直接使用

$radius: 3px;
@mixin rounded {
    border-radius: $radius;
}

使用

@use "src/corners" as *;

.button {
    @include rounded;
    padding: 5px + $radius;
}

私有模塊

變量使用 - 開頭厂僧，@use 不會(huì)引入這個(gè)變量

$-radius: 3px;

@mixin rounded {
    border-radius: $-radius;
}

index.scss

@use "src/corners";

.button {
    @include corners.rounded;
    // Error: Private members can't be accessed from outside their modules
    padding: 5px + corners.$-radius;
}

@forward

@forward 可以看作是轉(zhuǎn)發(fā)，在當(dāng)前模塊引入另一個(gè)模塊的所有變量胎围、mixins 和函數(shù)吁系，直接向外暴露 API，不會(huì)在當(dāng)前模塊增加代碼白魂，不同于 @use， @forward 不能給變量添加命名空間

例如在 bootstrap.css 引入 functions上岗、variables福荸、mixins 文件，不能直接在 bootstrap.scss 文件中使用這些引入的模塊肴掷。而是需要在另一個(gè)文件中引入 @use bootstrap 模塊敬锐，再去使用這些方法

/* bootstrap.scss */
@forward"functions";
@forward"variables";
@forward"mixins";

@forward 通過控制 show 和 hide 顯示或隱藏模塊中的某些變量

a.scss

@mixin rounded {
    border-radius: 100px;
}
footer {
    height: 1px;
}

b.scss

$radius: 3px;

c.scss
```scss
@forward "a" show rounded;
@forward "b" hide $radius;

index.scss

@import "c.scss";

.button {
    @include rounded;
    padding: $radius;
}
// Error: Undefined variable. padding: $radius;

@at-root

@at-root 用來跳出嵌套，在多級嵌套時(shí)比較常用呆瞻，包含 without 和 with

//沒有跳出
.parent-1 {
    color:#f00;
    .child {
        width:100px;
    }
}

//單個(gè)選擇器跳出
.parent-2 {
    color:#f00;
    @at-root .child {
        width:200px;
    }
}

//多個(gè)選擇器跳出
.parent-3 {
    background:#f00;
    @at-root {
        .child1 {
            width:300px;
        }
        .child2 {
            width:400px;
        }
    }
}

編譯為

.parent-1 {
    color: #f00;
}
.parent-1 .child {
    width: 100px;
}

.parent-2 {
    color: #f00;
}
.child {
    width: 200px;
}

.parent-3 {
    background: #f00;
}
.child1 {
    width: 300px;
}

.child2 {
    width: 400px;
}

@without和with

默認(rèn) @at-root 只會(huì)跳出選擇器嵌套台夺，而不能跳出 @media 或 @support，如果要跳出這兩種痴脾，則需使用@at-root (without: media)或 @at-root (without: support)颤介，@at-root 的關(guān)鍵詞有四個(gè)

• all 表示所有；
• rule 表示常規(guī) css 選擇器；
• media 表示 media滚朵；
• support 表示 support（@support主要是用于檢測瀏覽器是否支持css的某個(gè)屬性）

默認(rèn)的 @at-root 是 @at-root (without:rule)

/*跳出父級元素嵌套*/
@media print {
    .parent1{
        color:#f00;
        @at-root .child1 {
            width:200px;
        }
    }
}

/*跳出media嵌套冤灾，父級有效*/
@media print {
    .parent2{
        color:#f00;
        @at-root (without: media) {
            .child2 {
                width:200px;
            }
        }
    }
}

/*跳出media和父級*/
@media print {
    .parent3{
        color:#f00;
        @at-root (without: all) {
            .child3 {
                width:200px;
            }
        }
    }
}

編譯成

/*跳出父級元素嵌套*/
@media print {
    .parent1 {
        color: #f00;
    }
    .child1 {
        width: 200px;
    }
}
/*跳出media嵌套，父級有效*/
@media print {
    .parent2 {
        color: #f00;
    }
}
.parent2 .child2 {
    width: 200px;
}
/*跳出media和父級*/
@media print {
    .parent3 {
        color: #f00;
    }
}
.child3 {
    width: 200px;
}

@at-root與 & 配合使用

.child{
    @at-root .parent &{
        color:#f00;
    }
}

編譯為

.parent .child {
    color: #f00;
}

SCSS 內(nèi)置拓展

scss內(nèi)置擴(kuò)展分為 color, list, map, math, meta, selector, string 等辕近，擴(kuò)展也就是 scss 內(nèi)置的一些 function韵吨，相當(dāng)于 JS 內(nèi)置方法

內(nèi)置函數(shù)可以使用 @use 模塊化引入，也可以直接使用他提供的全局函數(shù)名調(diào)用移宅，以下兩種方式是一樣的归粉。

@use 'sass:list';
p {
    color: nth($list: red blue green, $n: 2); // blue
    color: list.nth($list: red blue green, $n: 2); // blue
}

String 字符串函數(shù)

scss 有許多處理字符串的函數(shù)

• quote($string)：向字符串添加引號

quote(hello) //"hello"

• unquote($string) 移除字符串的引號

unquote("hello") //hello

• str-index($string, $substring) 返回 substring 子字符串第一次在 string 中出現(xiàn)的位置。如果沒有匹配到子字符串漏峰，則返回 null盏浇。區(qū)分大小寫。

str-index(abcd, a) // 1 
str-index(abcd, ab) // 1 
str-index(abcd, X) // null

• str-length($string) 獲取字符串長度

str-length("hello") //5

• string-insert($string, $insert, $index) 在字符串 string 中 index 位置插入 insert

str-insert("Hello world!", " xiaoming", 6) //"Hello xiaoming world!"

• str-slice($string, $start-at, $end-at: -1) 從 string 中截取子字符串芽狗，通過 start-at 和 end-at 設(shè)置始末位置绢掰，未指定結(jié)束索引值則默認(rèn)截取到字符串末尾。和 js 感覺有點(diǎn)相似

str-slice("abcd", 2, 3)   => "bc" 
str-slice("abcd", 2)      => "bcd" 
str-slice("abcd", -3, -2) => "bc" 
str-slice("abcd", 2, -2)  => "bc"

其他

• to-lower-case(*string*) 將字符串轉(zhuǎn)成小寫
• to-upper-case(*string*) 將字符串轉(zhuǎn)成大寫
• unique-id() 返回一個(gè)無引號的隨機(jī)字符串作為 id

事例代碼

p {
    &:after {
        content: quote(這是里面的內(nèi)容);
    }
    background-color: unquote($string: "#F00");
    z-index:str-length("scss學(xué)習(xí)");
}

編譯結(jié)果

p {
    background-color: #F00;
    z-index: 6;
}
p:after {
    content: "這是里面的內(nèi)容";
}

Math 數(shù)學(xué)函數(shù)

Math 數(shù)值函數(shù)處理數(shù)值計(jì)算

• abs(number) 返回一個(gè)數(shù)值的絕對值

abs(13) // 13 
abs(-13) // 13

• comparable(num1, num2) 返回一個(gè)布爾值童擎，判斷 num1 與 num2 是否可以進(jìn)行比較 滴劲，注意是否可以比較，不是比較的結(jié)果

comparable(15px, 10px) // true 
comparable(20mm, 1cm) // true 
comparable(35px, 2em) // false

• ceil(*number*) 向上取整

ceil(13.24) //14

• floor(*number*) 向下取整

floor(15.84) // 15

• max(number... 返回最大值

max(5, 7, 9, 0, -3, -7) // 9

• min(number... 返回最小值

min(7, 2, 0, -2, -7) // -7

• percentage(number)：將數(shù)字轉(zhuǎn)化為百分比的表達(dá)形式

percentage(1.2) // 120

• random()：返回 0-1 區(qū)間內(nèi)的小數(shù)顾复，

random() // 0.2783

• random(number)如果傳入 number 參數(shù)班挖，返回 1 至 number 之間的整數(shù)，包括 1 和 limit

random(10) // 4

• round(number)：返回最接近該數(shù)的一個(gè)整數(shù)芯砸，四舍五入

round(15.20) // 15 round(15.80) // 16

• div($number1, $number2) //=> number 返回 $number2 除以 $number1 結(jié)果

@debug math.div(1, 2); // 0.5
@debug math.div(100px, 5px); // 20
@debug math.div(100px, 5); // 20px
@debug math.div(100px, 5s); // 20px/s
@debug math.percentage(0.2); // 20%

事例代碼

p {
    z-index: abs(-15); // 15
    z-index: ceil(5.8); //6
    z-index: max(5, 1, 6, 8, 3); //8
    opacity: random(); // 隨機(jī) 0-1
}

編譯為

p {
    z-index: 15;
    z-index: 6;
    z-index: max(5, 1, 6, 8, 3);
    opacity: 0.8636254167;
}

List 列表函數(shù)

List 特點(diǎn)

• List 函數(shù)可以訪問列表中的值萧芙，向列表添加元素，合并列表等假丧。
• List 列表是不可變的双揪，因此在處理列表時(shí)，返回的是一個(gè)新的列表包帚，而不是在原有的列表上進(jìn)行修改渔期。
• 列表的起始索引值為 1，記住不是 0

List 方法

• append(*list*, *value*, [*separator*]) 將單個(gè)值 value 添加到列表尾部渴邦。separator 是分隔符疯趟，默認(rèn)會(huì)自動(dòng)偵測，或者指定為逗號或空格谋梭，分別用 comma 信峻、space 表示

append((a b c), d) // a b c d 
append((a b c), (d), comma) // a, b, c, d

• index(list, value) 返回元素 value 在列表中的索引位置

index(a b c, b) // 2 
index(a b c, f) // null

• is-bracketed(list) 判斷列表中是否有中括號

is-bracketed([a b c]) // true 
is-bracketed(a b c) // false

• list-separator(list) 返回一列表的分隔符類型∥痛玻可以是空格或逗號

list-separator(a b c) // "space"
list-separator(a, b, c) // "comma"

• join(list1, list2, [separator, bracketed]) 合并兩列表盹舞，將列表 list2 添加到列表 list1 的末尾产镐。separator 是分隔符，默認(rèn)會(huì)自動(dòng)偵測矾策，或者指定為逗號或空格磷账。bracketed 默認(rèn)會(huì)自動(dòng)偵測是否有中括號，可以設(shè)置為 true 或 false

join(a b c, d e f) // a b c d e f 
join((a b c), (d e f), comma) // a, b, c, d, e, f 
join(a b c, d e f, $bracketed: true) // [a b c d e f]

• length($list) 返回列表長度

length(a b c) // 3

• set-nth(list, n, value) 設(shè)置列表第 n 項(xiàng)的值為 value贾虽。

set-nth(a b c, 2, x) // a x c

• nth($list, $n) 獲取第 n 項(xiàng)的值

nth(a b c, 3) // c

• zip(lists) 將多個(gè)列表按照以相同索引值為一組逃糟，重新組成一個(gè)新的多維度列表，非常好用

zip(1px 2px 3px, solid dashed dotted, red green blue) 
// 1px solid red, 2px dashed green, 3px dotted blue

事例代碼

p {
    z-index: length(12px); //1
    z-index: length(12px 5px 8px); //3
    z-index: index(a b c d, c); //3
    padding: append(10px 20px, 30px); // 10px 20px 30px
    color: nth($list: red blue green, $n: 2); // blue
    @debug list.zip(10px 50px 100px, short mid long); // 10px short, 50px mid, 100px long
}

編譯結(jié)果

p {
    z-index: 1;
    z-index: 3;
    z-index: 3;
    padding: 10px 20px 30px;
    color: blue;
}

Map(映射) 函數(shù)

Sass Map 是不可變的蓬豁，因此在處理 Map 對象時(shí)绰咽，返回的是一個(gè)新的 Map 對象，而不是在原有的 Map 對象上進(jìn)行修改地粪。

Map(映射)對象是以一對或多對的 key/value 來表示

• map-get(map, key) 返回 Map 中 key 所對應(yīng)的 value(值)取募。如沒有對應(yīng)的 key，則返回 null 值

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-get($font-sizes, "small") // 12px

• map-has-key(map, key) 判斷 map 是否有對應(yīng)的 key蟆技，存在返回 true玩敏，否則返回 false

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-has-key($font-sizes, "big") // false

• map-keys(map) 返回 map 中所有的 key 組成的隊(duì)列

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-keys($font-sizes) // "small", "normal, "large"

• map-values(map) 返回 map 中所有的 value 并生成一個(gè)隊(duì)列

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-values($font-sizes) // 12px, 18px, 24px

• map-merge(map1, map2) 合并兩個(gè) map 形成一個(gè)新的 map 類型，即將 map2 添加到 map1的尾部

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
$font-sizes2: ("x-large": 30px, "xx-large": 36px)

map-merge($font-sizes, $font-sizes2) 
//"small": 12px, "normal": 18px, "large": 24px, "x-large": 30px, "xx-large": 36px

• map.deep-merge($map1, $map2) 將兩個(gè)嵌套 map 深度合并

$helvetica-light: (
  "weights": (
    "lightest": 100,
    "light": 300
  )
);
$helvetica-heavy: (
  "weights": (
    "medium": 500,
    "bold": 700
  )
);

@debug map.deep-merge($helvetica-light, $helvetica-heavy);
// (
//   "weights": (
//     "lightest": 100,
//     "light": 300,
//     "medium": 500,
//     "bold": 700
//   )
// )
@debug map.merge($helvetica-light, $helvetica-heavy);
// (
//   "weights": (
//     "medium: 500,
//     "bold": 700
//   )
// )

• map-remove(map, keys... )移除 map 中的 keys质礼，多個(gè) key 使用逗號隔開

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px) 
map-remove($font-sizes, "small") // ("normal": 18px, "large": 24px) 
map-remove($font-sizes, "small", "large") // ("normal": 18px)

• map.deep-remove($map, $key, $keys...) 多層嵌套刪除旺聚，刪除層級根據(jù)參數(shù)個(gè)數(shù)

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.deep-remove($fonts, "Helvetica", "weights", "regular");
// (
//   "Helvetica": (
//     "weights: (
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

• map.set($map, $keys..., $value) 添加 key 和 value 值，第一個(gè)是 map眶蕉，最后一個(gè)是 value砰粹，中間是 key，嵌套傳入多個(gè) key...

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.set($fonts, "Helvetica", "weights", "regular", 300);
// (
//   "Helvetica": (
//     "weights": (
//       "regular": 300,
//       "medium": 500,
//       "bold": 700
//     )
//   )
// )

事例代碼

@use 'sass:map';

// 創(chuàng)建Map造挽，類似于對象
$map: (
  key: value,
  nextkey: nextvalue
);

// 使用
.element:before {
  content: map-get($map, key);
}

上面編譯輸出后的結(jié)果如下：

.element:before {
  content: value
}

Map 在 @each 應(yīng)用

/* 定義一個(gè)sass map名稱為$icons */
$icons: (
  checkmark: a,
  plus: b,
  minus: c
);

/* 遍歷map的所有key碱璃，創(chuàng)建各自的類 */
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
}

編譯結(jié)果

/* 遍歷map的所有key，創(chuàng)建各自的類 */
.icon--checkmark {
  content: "a";
}

.icon--plus {
  content: "b";
}

.icon--minus {
  content: "c";
}

@each 遍歷嵌套 map 多個(gè)值

• 給 map 一個(gè) key 賦予多個(gè) value（相當(dāng)于數(shù)組）饭入，多個(gè) value 之間通過逗號 , 來分割
• 定義一系列 buttons 嵌器，每一個(gè) key 的第一個(gè) value 是background-color，第二個(gè) value 是 font-color圣拄。
• 遍歷 $buttons 賦值給 $colors 對象嘴秸。通過 nth($colors,1)（第一個(gè)參數(shù)是對象的名稱，第二個(gè)參數(shù)是值得位置）拿到第一個(gè)key庇谆。如果需要拿第二個(gè)value，那將第二個(gè)參數(shù)改為 2凭疮。

// _m-buttons.scss
$buttons: (
  error: (#d82d2d, #666),
  success: (#52bf4a, #fff),
  warning: (#c23435, #fff)
);

.m-button {
  display: inling-block;
  padding: .5em;
  background: #ccc;
  color: #666;

  @each $name, $colors in $buttons {
    $bgcolor: nth($colors, 1);
    $fontcolor: nth($colors, 2);

    &--#{$name} {
      background-color: $bgcolor;
      color: $fontcolor;
    }
  }
}

編譯結(jié)果

.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
}

.m-button--error {
  background-color: #d82d2d;
  color: #666;
}

.m-button--success {
  background-color: #52bf4a;
  color: #fff;
}

.m-button--warning {
  background-color: #c23435;
  color: #fff;
}

selector 選擇器函數(shù)

selector 相關(guān)函數(shù)可對選擇 css 進(jìn)行一些相應(yīng)的操作

• is-superselector(super, sub) 比較兩個(gè)選擇器匹配的范圍饭耳，即判斷 super 選擇器是否包含了 sub 選擇器所匹配的范圍，是的話返回 true执解，否則返回 false

is-superselector("div", "div.myInput") // true 
is-superselector("div.myInput", "div") // false 
is-superselector("div", "div") // true

• selector-append(selectors) 將第二個(gè) (也可以有多個(gè)) 添加到第一個(gè)選擇器的后面寞肖。

selector-append("div", ".myInput") // div.myInput 
selector-append(".warning", "__a") 結(jié)果: .warning__a

• selector-nest(selectors) 回一個(gè)新的選擇器纲酗，該選擇器通過提供的列表選擇器生成一個(gè)嵌套的列表

selector-nest("ul", "li") // ul li 
selector-nest(".warning", "alert", "div") // .warning div, alert div

• selector-parse(selector) 將字符串的選擇符 selector 轉(zhuǎn)換成選擇器隊(duì)列。

selector-parse("h1 .myInput .warning") // ('h1' '.myInput' '.warning')

• selector-replace(selector, original, replacement) 給定一個(gè)選擇器新蟆，用 replacement 替換 original 后返回一個(gè)新的選擇器隊(duì)列

selector-replace("p.warning", "p", "div") // div.warning

• selector-unify(selector1, selector2) 將兩組選擇器合成一個(gè)復(fù)合選擇器觅赊。如兩個(gè)選擇器無法合成，則返回 null 值琼稻。

selector-unify("myInput", ".disabled") // myInput.disabled 
selector-unify("p", "h1") // null

• `simple-selectors(selectors) 將合成選擇器拆為單個(gè)選擇器

simple-selectors("div.myInput") // div, .myInput 
simple-selectors("div.myInput:before") // div, .myInput, :before

事例代碼

@use 'sass:selector';

@debug selector.is-superselector("a", "a"); // true

// 可以直接使用@forward下的前綴
@debug selector-append("a", ".disabled"); // a.disabled
@debug selector-extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled

.header {
    content: selector-append(".a", ".b", ".c") + '';
    content: selector-unify("a", ".disabled") + '';
}

meta

meta 提供一個(gè) mixin 和一些原子級別的 function

• meta.calc-args獲取方法的參數(shù)
• meta.calc-name獲取方法名

meta.load-css

meta.load-css($url吮螺，$with:()) 把$url中css樣式全部包含進(jìn)來。注意帕翻，$url引入的函數(shù)鸠补，變量和mixin在 meta.load-css()后的scss中并不能用，它只會(huì)返回編譯后的css代碼嘀掸。它的第二個(gè)參數(shù)可以修改使用了!default的變量

src/corners

$border-contrast: false !default;

code {
    background-color: #6b717f;
    color: #d2e1dd;
    @if $border-contrast {
        border-color: #dadbdf;
    }
}

index.scss

@use "sass:meta";

body.dark {
    @include meta.load-css("src/corners", $with: ("border-contrast": true));
}

編譯為

body.dark code {
    background-color: #6b717f;
    color: #d2e1dd;
    border-color: #dadbdf;
}

相關(guān) function

@use "sass:meta";

@debug meta.calc-args(calc(100px + 10%)); // unquote("100px + 10%")
@debug meta.calc-args(clamp(50px, var(--width), 1000px)); // 50px, unquote("var(--width)"), 1000px

@debug meta.calc-name(calc(100px + 10%)); // "calc"
@debug meta.calc-name(clamp(50px, var(--width), 1000px)); // "clamp"

color 顏色函數(shù)

scss包含很多操作顏色的函數(shù)紫岩。

• rgb(red, green, blue) 創(chuàng)建一個(gè) Red-Green-Blue (RGB) 色。其中 R 是 "red" 表示紅色睬塌，G 是 "green" 綠色泉蝌，B 是 "blue" 藍(lán)色

rgb(0, 255, 255);

• rgba(red, green, blue, alpha) 根據(jù)紅、綠揩晴、藍(lán)和 透明度值 創(chuàng)建一個(gè)顏色

rgba(0, 255, 255, 0.3);

• hsl(hue, saturation, lightness) 通過色相（hue）勋陪、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個(gè)顏色

hsl(120, 100%, 50%); // 綠色 
hsl(120, 100%, 75%); // 淺綠色 
hsl(120, 100%, 25%); // dark green 
hsl(120, 60%, 70%); // 柔和的綠色 

• hsla(hue, saturation, lightness, alpha) 通過色相（hue）、飽和度(saturation)文狱、亮度（lightness）和 透明(alpha) 的值創(chuàng)建一個(gè)顏色

hsl(120, 100%, 50%, 0.3); // 綠色帶有透明度 
hsl(120, 100%, 75%, 0.3); // 淺綠色帶有透明度

• grayscale(color) 將一個(gè)顏色變成灰色粥鞋，相當(dāng)于 desaturate( color,100%)

grayscale(#7fffd4); // #c6c6c6

• complement(color) 返回一個(gè)補(bǔ)充色，相當(dāng)于 adjust-hue($color,180deg)

complement(#7fffd4); // #ff7faa

• invert(*color*, weight) 返回一個(gè)反相色瞄崇，紅呻粹、綠、藍(lán)色值倒過來苏研，而透明度不變

invert(white); // black

• red(color) 從一個(gè)顏色中獲取其中紅色值（0-255）等浊，可用于取出某個(gè) hex 顏色中的紅色值

red(#7fffd4); // 127 
red(red); // 255

• green(color) 從一個(gè)顏色中獲取其中綠色值（0-255）

green(#7fffd4); // 255 
green(blue); // 0

• blue(color) 從一個(gè)顏色中獲取其中藍(lán)色值（0-255）

blue(#7fffd4); // 212 
blue(blue); // 255

• hue(color) 返回顏色在 HSL 色值中的角度值 (0deg - 255deg)

hue(#7fffd4); // 160deg

• saturation(color) 獲取一個(gè)顏色的飽和度值(0% - 100%)

saturation(#7fffd4); // 100%

• lightness(color) 獲取一個(gè)顏色的亮度值(0% - 100%)

lightness(#7fffd4); // 74.9%

• alpha(color) 返回顏色的 alpha，返回值為 0 或 1

alpha(#7fffd4); // 1

• opacity(color) 獲取顏色透明度值(0-1)

opacity(rgba(127, 255, 212, 0.5); // 0.5

• mix(color1, color2, weight) 把兩種顏色混合起來摹蘑。

weight 參數(shù)必須是 0% 到 100%筹燕。默認(rèn) weight 為 50%，表明顏色各取 50% color1 和 color2 的色值相加衅鹿。如果 weight 為 25%撒踪，那表明顏色為 25% color1 和 75% color2 的色值相加

• adjust-hue(color, degrees) 通過改變一個(gè)顏色的色相值（-360deg - 360deg），創(chuàng)建一個(gè)新的顏色

adjust-hue(#7fffd4, 80deg); // #8080ff

• lighten(color, amount) 通過改變顏色的亮度值（0% - 100%）大渤，讓顏色變亮制妄，創(chuàng)建一個(gè)新的顏色

• darken(color, amount) 通過改變顏色的亮度值（0% - 100%），讓顏色變暗泵三，創(chuàng)建一個(gè)新的顏色

• saturate(color, amount) 提高傳入顏色的色彩飽和度耕捞。等同于 adjust-color( color, saturation: amount)

• desaturate(color, amount) 調(diào)低一個(gè)顏色的飽和度后產(chǎn)生一個(gè)新的色值衔掸。同樣，飽和度的取值區(qū)間在 0% ~ 100%俺抽。等同于 adjust-color(color, saturation: -amount)

• opacify(color, amount) 降低顏色的透明度敞映，取值在 0-1 之。等價(jià)于 adjust-color(color, alpha: amount)

• fade-in(color, amount)降低顏色的透明度磷斧，取值在 0-1 之振愿。等價(jià)于 adjust-color(color, alpha: amount)

• transparentize(color, amount) 提升顏色的透明度，取值在 0-1 之間瞳抓。等價(jià)于 adjust-color(color, alpha: -amount)

• fade-out(color, amount) 提升顏色的透明度埃疫，取值在 0-1 之間。等價(jià)于 adjust-color(color, alpha: -amount)

事例代碼

.p1 {
    // 讓顏色變亮
    color:scale-color(#5c7a29, $lightness: +30%);
}

.p2 {
    // 讓顏色變暗
    color:scale-color(#5c7a29, $lightness: -15%);
}

.p3 {
    // 降低顏色透明度
    color:scale-color(#5c7a29, $alpha: -40%);
}

編譯為

.p1 {
    color: #95c249;
}

.p2 {
    color: #4e6823;
}

.p3 {
    color: rgba(92, 122, 41, 0.6);
}

調(diào)試相關(guān)

@debug

@debug 打印表達(dá)式的值孩哑，方便調(diào)試栓霜。

$font-sizes: 10px + 20px;
    $style: (
        color: #bdc3c7
    );
.container {
    @debug $style;
    @debug $font-sizes;
}

輸出結(jié)果

Debug：(color: #bdc3c7)
Debug：30px

@error

@error 顯示錯(cuò)誤信息

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }

  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, initial);

  left: $left-value;
  right: $right-value;
  [dir=rtl] & {
    left: $right-value;
    right: $left-value;
  }
}

.sidebar {
  @include reflexive-position(top, 12px);
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.
}

輸出結(jié)果

Error: "Property top must be either left or right."
  ?
3 │     @error "Property #{$property} must be either left or right.";
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ?
  example.scss 3:5   reflexive-position()
  example.scss 19:3  root stylesheet

@warn

@warn顯示警告性建議，會(huì)顯示堆棧信息横蜒。

$known-prefixes: webkit, moz, ms, o;

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if not index($known-prefixes, $prefix) {
      @warn "Unknown prefix #{$prefix}.";
    }

    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.tilt {
  // Oops, we typo'd "webkit" as "wekbit"!
  @include prefix(transform, rotate(15deg), wekbit ms);
}

顯示警告信息

Warning: Unknown prefix wekbit.
    example.scss 6:7   prefix()
    example.scss 16:3  root stylesheet

總結(jié)

內(nèi)容知識比較多胳蛮，通過查閱 Sass 官方文檔和閱讀文章翻譯，收集整理常用 Sass 知識丛晌，方便在閱讀 element-plus 組件庫源碼查閱