官方文檔：https://sass-lang.com/

中文文檔：https://www.sass.hk/docs/

bilibili

什么是 Sass

Sass（英文全稱：Syntactically Awesome Stylesheets，語法上很棒的樣式表）是一個最初由 Hampton Catlin 設計并由 Natalie Weizenbaum 開發的層疊樣式表語言， Sass 是一個 CSS 預處理器。Sass 是 CSS 擴展語言，可以幫助我們減少 CSS 重復的代碼，節省開發時間。Sass 完全兼容所有版本的 CSS。

為什么使用 Sass?

• CSS 本身語法不夠強大，導致重復編寫一些代碼，無法實現復用，而且在代碼也不方便維護。
• Sass 引入合理的樣式復用機制，增加了規則、變量、混入、選擇器、繼承、內置函數等等特性。
• Sass 是最早的 CSS 預處理語言，有比 Less 更為強大的功能。但因其一開始的縮進式語法（“縮進” 代替 “花括號” 表示屬性屬于某個選擇器， “換行” 代替 “分號” 分隔屬性）并不能被開發者們接受，所以使用率不高。Sass 從第三代開始，放棄了縮進式風格，并且完全向下兼容普通的 CSS 代碼，這一代的 Sass 也被稱為 Scss（Sassy CSS）。
• Bootstrap 使用 Less，但在即將發布的 4.0 卻選擇了 Sass。

Sass 的工作方式是：在 Sass 源文件中寫代碼，然后由 Sass 程序（Sass 編譯器/轉化器）將其轉換為最終瀏覽器能認識的 CSS 文件。

Sass 編譯排版格式：

• nested：嵌套縮進的 css 代碼（默認）

• expanded：展開的多行 css 代碼

• compact：簡潔格式的 css 代碼

• compressed：壓縮后的 css 代碼

VSCode集成Sass

安裝 Live Sass Compiler 插件，實時將 SASS / SCSS 文件編譯/轉換為 CSS 文件。

下載完成后點擊擴展設置。

在 settings.json 文件中添加配置，具體配置信息可參考官方文檔。

"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"
  },
  {
    "format": "compressed",
    "extensionName": ".min.css",
    "savePath": "~/../css/"
  }
],
/* 排除目錄 */
"liveSassCompile.settings.excludeList": [
  "/**/node_modules/**",
  "/.vscode/**"
],
/* 是否生成對應的map */
"liveSassCompile.settings.generateMap": true,
/* 是否添加兼容前綴 例如：-webkit- -moz- 等 */
"liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]

創建文件夾，編寫一個 Sass 風格代碼，點擊 VSCode 下面狀態欄的 watch sass ，發現會生成了一個 css 文件和 map 文件，css 文件代碼格式就是我們在 settings.json 文件中配置的格式。

Sass語法嵌套規則

嵌套關系

Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器。

.container {
  width: 1200px;
  margin: 0 auto;
  .header {
    height: 90px;
    line-height: 90px;
    .logo {
      width: 100px;
      height: 60px;
    }
  }
  .center {
    height: 600px;
    background-color: #F00;
  }
  .footer {
    font-size: 16px;
    text-align: center;
  }
}

編譯為

.container {
  width: 1200px;
  margin: 0 auto;
}
.container .header {
  height: 90px;
  line-height: 90px;
}
.container .header .logo {
  width: 100px;
  height: 60px;
}
.container .center {
  height: 600px;
  background-color: #f00;
}
.container .footer {
  font-size: 16px;
  text-align: center;
}

群組選擇器嵌套

.container {
  h1,
  h2,
  h3 {
    margin-bottom: 0.8em;
  }

  nav,
  aside {
    a {
      color: blue;
    }
  }
}

編譯為

.container h1,
.container h2,
.container h3 {
  margin-bottom: 0.8em;
}
.container nav a,
.container aside a {
  color: blue;
}

子組合選擇器和同層組合選擇器

子組合選擇器 >、同層全體組合選擇器 ~、同層相鄰組合選擇器 +

article {
  ~ article { border-top: 1px dashed #ccc }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

編譯為

article ~ article {
  border-top: 1px dashed #ccc;
}
article dl > dt {
  color: #333;
}
article dl > dd {
  color: #555;
}
nav + article {
  margin-top: 0;
}

父選擇器 &

一般情況下，Sass 在解開一個嵌套規則時就會把父選擇器（#content）通過一個空格連接到子選擇器（article 和 aside）的前邊形成 #content article 和 #content aside。這種在 CSS 里邊被稱為后代選擇器，因為它選擇 ID 為 content 的元素內所有命中選擇器 article 和 aside 的元素。

使用一個特殊的 Sass 選擇器，即父選擇器 &。當包含父選擇器標識符的嵌套規則被打開時，它不會像后代選擇器那樣進行拼接，而是 & 被父選擇器直接替換（用 & 代表嵌套規則外層的父選擇器）。如果含有多層嵌套，最外層的父選擇器會一層一層向下傳遞。

.container {
  width: 1200px;
  margin: 0 auto;
  a {
    color: #333;
    &:hover {
      text-decoration: underline;
      color: #F00;
    }
  }
  .top {
    border: 1px #f2f2f2 solid;
    &-left {
      float: left;
      width: 200px;
    }
  }
}

編譯為

.container {
  width: 1200px;
  margin: 0 auto;
}
.container a {
  color: #333;
}
.container a:hover {
  text-decoration: underline;
  color: #f00;
}
.container .top {
  border: 1px #f2f2f2 solid;
}
.container .top-left {
  float: left;
  width: 200px;
}

屬性嵌套

有些 CSS 屬性遵循相同的命名空間（namespace），比如 font-family，font-size，font-weight 都以 font 作為屬性的命名空間。為了便于管理這樣的屬性，同時也為了避免了重復輸入，Sass 允許將屬性嵌套在命名空間中。

嵌套屬性的規則是這樣的：把屬性名從中劃線 - 的地方斷開，在根屬性后邊添加一個冒號:，緊跟一個 { }塊，把子屬性部分寫在這個 { } 塊中。

.container {
  a {
    color: #333;
    // 注意 font：后面要加一個空格
    font: {
      size: 14px;
      family: sans-serif;
      weight: bold;
    }
  }
}

編譯為

.container a {
  color: #333;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: bold;
}

命名空間也可以包含自己的屬性值：

nav {
  border: 1px solid #ccc {
    left: 0px;
    right: 0px;
  }
}

編譯為

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

占位符選擇器 %foo

Sass 額外提供了一種特殊類型的選擇器：占位符選擇器。

• 與常用的 id 與 class 選擇器寫法相似，只是 # 或 . 替換成了 %
• 必須通過 [<font style="color:#DF2A3F;">@extend</font>](https://www.sass.hk/docs/#t7-3) 指令調用；
• 當占位符選擇器單獨使用時（未通過 @extend 調用），不會編譯到 CSS 文件中；

有時，需要定義一套樣式并不是給某個元素用，而是只通過 @extend 指令使用，尤其是在制作Sass 樣式庫的時候，希望 Sass 能夠忽略用不到的樣式。

.button%base {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
}
.btn-default {
    @extend %base;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-success {
    @extend %base;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

編譯為

.button.btn-success, .button.btn-default {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
}

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

.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

注釋

Sass支持兩種注釋

• 多行注釋 /* … */ 會編譯到 CSS 文件。將 ! 作為多行注釋的第一個字符表示在壓縮輸出模式下保留這條注釋并輸出到 CSS 文件中，通常用于添加版權信息。
• 單行注釋（//）不會編譯到 CSS 文件

body {
  color: #333; // 這種注釋內容不會出現在生成的css文件中
  padding: 0; /* 這種注釋內容會出現在生成的css文件中 */
}

編譯為

@charset "UTF-8";
body {
  color: #333;
  padding: 0; /* 這種注釋內容會出現在生成的css文件中 */
}

Sass變量

CSS 變量的定義：

:root {
  --color: #f00;
}

body {
  --border-color: #f2f2f2;
}

.header {
  --background-color: #f8f8f8;
}

p {
  color: var(--color);
  border-color: var(--border-color);
}

.header {
  background-color: var(--background-color);
}

Sass 的寫法：

$font-size: 14px;

.container {
  font-size: $font-size;
}

定義規則

• 變量以美元符號（$）開頭，后面跟變量名；
• 變量名是不能以數字開頭的，可包含字母、數字、下劃線、橫線（連接符）；
• 賦值方法與 CSS 屬性的寫法一樣，即變量名和值之間用冒號分隔；
• 變量一定要先定義，后使用；

通過連接符與下劃線定義的同名變量為同一變量，使用中劃線的方式更為普遍。實際上，在 Sass 的大多數地方，中劃線命名的內容和下劃線命名的內容是互通的，除了變量，也包括對混合器和 Sass 函數的命名。但是在 Sass 中純 CSS 部分不互通，比如類名、ID 或屬性名。

$font-size: 14px;
$font_size: 16px;
.container {
  font-size: $font-size;
}

編譯為

.container {
  font-size: 16px;
}

變量作用域

• 全局變量：在最外部定義的變量或者在內部定義但通過 !global 標識的變量。
• 局部變量：在內部定義的變量。當變量定義在 CSS 規則塊內，那么該變量只能在此規則塊內使用。

/*全局方式1：*/
$font-size: 14px;
.container {
  $width: 100px;
  width: $width;
  font-size: $font-size;
}

/*全局方式2：*/
.container {
  $font-size: 16px !global;
  font-size: $font-size;
}
.footer {
  font-size: $font-size;
}

編譯為

/*全局方式1：*/
.container {
  width: 100px;
  font-size: 14px;
}

/*全局方式2：*/
.container {
  font-size: 16px;
}

.footer {
  font-size: 16px;
}

變量的值類型

任何可以用作 CSS 屬性值的賦值都可以用作 Sass 的變量值。支持 7 種主要的數據類型：

• 數字，1，2，13，10px，30%
• 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
• 顏色，blue，#04a3f9，rgba(255,0,0,0.5)
• 布爾型，true，false
• 空值，null
• 數組（list），用空格或逗號作分隔符，10px 15px 0 0 Helvetica, Arial, sans-serif，主要為 SassScript 函數服務
• maps，相當于 JavaScript 的 object，(key1: value1, key2: value2)，主要為 SassScript 函數服務

/*數字*/
$layer-index: 10;
/*數字*/
$border-width: 3px;
/*數組*/
$font-base-family: "Open Sans", Helvetica, Sans-Serif;
/*顏色*/
$top-bg-color: rgba(255, 147, 29, 0.6);
/*數組*/
$block-base-padding: 6px 10px 6px 10px;
/*布爾*/
$blank-mode: true;
/*值null是其類型的唯一值。它表示缺少值，通常由函數返回以指示缺少結果*/
$var: null;
/*Map*/
$color-map: (
  color1: #fa0000,
  color2: #fbe200,
  color3: #95d7eb,
);
$fonts: (
  serif: "Helvetica Neue",
  monospace: "Consolas",
);

使用

.container {
  /*如果為true*/
  @if $blank-mode {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
  content: type-of($var); /*判斷類型*/
  content: length($var); /*長度*/
  color: map-get($color-map, color2); /*找到對應map中的鍵*/
  // color: map-get($color-map, "color2");
  // color: map-get($color-map, color5); /*不存在時被忽略*/
}

編譯為

.container {
  /*如果為true*/
  background-color: #000;
  content: null; /*判斷類型*/
  content: 1; /*長度*/
  color: #fbe200; /*找到對應map中的鍵*/
}

反復聲明一個變量，只有最后一處聲明有效且它會覆蓋前邊的值。

• 通過 !defalut 標識默認值。含義是：如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。

$color: #333;

/*如果$color之前沒定義就使用如下的默認值，對代碼沒有影響，避免出現沒賦值的低級錯誤*/
$color: #666 !default;
.container {
  border-color: $color;
}

編譯為

.container {
  border-color: #333;
}

導入 @import

CSS 允許在一個 CSS 文件中導入其他 CSS 文件。然而只有執行到 [@import](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@import) 時，瀏覽器才會去下載其他 CSS 文件。

@import url(public.css)

Sass 拓展了 @import 的功能，允許其導入 Scss 或 Sass 文件，可以省略 .sass 或 .scss 文件后綴。被導入的文件將合并編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。

$font-base-color: #333;

// @import "public.scss";
@import "public";
p {
  color: $font-base-color;
}

編譯為

p {
  color: #333;
}

注意：在 Sass 中下面幾種導入方式會當作默認的 CSS 文件進行處理。

• 文件拓展名是 .css；
• 文件名以 http:// 開頭；
• 文件名是 url()；
• @import 包含 media queries；

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

當你 @import 一個局部文件時，還可以不寫文件的全名，即省略文件名開頭的下劃線。

• 文件名開頭加下劃線和不加下劃線是沒有區別的，同一個目錄下不能同時出現兩個相關名的 Sass 文件（一個不帶，一個帶），否則導入帶下劃線的文件時編譯會報錯。

//如果同時存在 _theme.scss 和 theme.scss 文件
//@import "theme"; 編譯會報錯Error: It's not clear which file to import
@import "theme";

• 以下劃線開頭的文件不會被編譯成一個獨立的 CSS 文件，常用于定義一些變量供其他 Sass 文件引入。

跟原生的 CSS 不同，Sass 允許 @import 命令寫在 CSS 規則內。

$font-base-color: #999;

aside {
  background: blue;
  color: white;
}

.blue-theme {
  @import "blue-theme";
  color: $font-base-color;
}

編譯為

.blue-theme {
  color: #999;
}
.blue-theme aside {
  background: blue;
  color: white;
}

混入 @mixin

混合指令（Mixin）用于定義可重復使用的樣式。混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過參數功能引入變量，輸出多樣化的樣式。

使用 [@include](https://www.sass.hk/docs/) 指令引用混合樣式，格式是在其后添加混合名稱，以及需要的參數（可選）。@include 調用會把混合器中的所有樣式提取出來放在 @include 被調用的地方。

@mixin block {
  // 寫所有css樣式
  // 大部分scss語法
  display: block;
  border: 1px solid #f6f6f6;
}

// 使用混入 注意：沒有父子關系
.container {
  .block {
    @include block;
  }
}

編譯為

.container .block {
  display: block;
  border: 1px solid #f6f6f6;
}

使用變量（單參數）：

// 定義flex布局元素縱軸的排列方式
@mixin flex-align($aitem) {
  -webkit-box-align: $aitem;
  -webkit-align-items: $aitem;
  -ms-flex-align: $aitem;
  align-items: $aitem;
}

// 只有一個參數，直接傳遞參數
.container {
  @include flex-align(center);
}
// 給指定參數指定值
.footer {
  @include flex-align($aitem: center);
}

編譯為

.container {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.footer {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

使用變量（多參數）：參數默認值使用 $name: default-value 的聲明形式，默認值可以是任何有效的 CSS 屬性值，甚至是其他參數的引用。

// 定義參數時建議加上默認值
@mixin block-padding($top, $right, $bottom: 0, $left: 0) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
}

/* 按照參數順序賦值*/
.container {
  @include block-padding(10px, 20px, 30px, 40px);
}
/* 可指定參數賦值*/
.container {
  @include block-padding($left: 20px, $top: 10px, $bottom: 10px, $right: 30px);
}

編譯為

/* 按照參數順序賦值*/
.container {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

/* 可指定參數賦值*/
.container {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 20px;
}

可變參數：

/** 
 *定義線性漸變
 *@param $direction  方向
 *@param $gradients  顏色過度的值列表
 */
@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: -webkit-gradient(linear, left top, right top, from(#f00), color-stop(orange), to(yellow));
  background-image: linear-gradient(to right, #f00, orange, yellow);
}

繼承 @extend

在設計網頁的時候通常遇到這樣的情況：一個元素使用的樣式與另一個元素完全相同，但又添加了額外的樣式。通常會在 HTML 中給元素定義兩個 class，一個通用樣式，一個特殊樣式。

選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。用 @extend 會將當前復用樣式的類名寫到 CSS 中。

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}
//通過選擇器繼承繼承樣式
.alert-info {
  @extend %alert;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-success {
  @extend %alert;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-warning {
  @extend %alert;
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  @extend %alert;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

編譯為

.alert, .alert-danger, .alert-warning, .alert-success, .alert-info {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

用 占位符選擇器 % 聲明，不會將當前復用樣式的類名寫到 CSS 中

%alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}
.alert-info {
  @extend %alert;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-success {
  @extend %alert;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-warning {
  @extend %alert;
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  @extend %alert;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

編譯為

.alert-danger, .alert-warning, .alert-success, .alert-info {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

使用混入實現相同效果

@mixin alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}
.alert-info {
  @include alert;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-success {
  @include alert;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-warning {
  @include alert;
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  @include alert;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

編譯為

.alert-info {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-success {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-warning {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

運算符

符號	說明
等號操作符	== 或 !=
關系運行符	>、<、<=、>=（后面只能判斷數值）
邏輯運行符	and、or、not
數字操作符	+、-、*、/、%

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

$height: 200;

$last: false;
div {
  @if $width>50 and $height<300 {
    font-size: 16px;
  } @else {
    font-size: 14px;
  }
  @if not $last {
    border-color: red;
  } @else {
    border-color: blue;
  }
}

編譯為

.container {
  background-color: blue;
}

div {
  font-size: 16px;
  border-color: red;
}

/ 在 CSS 中通常起到分隔數字的用途，Sass Script 作為 CSS 語言的拓展當然也支持這個功能，同時也賦予了 / 除法運算的功能。也就是說，如果 / 在 SassScript 中把兩個數字分隔，編譯后的 CSS 文件中也是同樣的作用。

以下三種情況 / 將被視為除法運算符號：

• 如果值或值的一部分是變量或者函數的返回值
• 如果值被圓括號包裹
• 如果值是算數表達式的一部分

$width: 1000px;
div {
  font: 16px/30px Arial, Helvetica, sans-serif; // 不運算
  width: $width/2; // 使用了變量
  z-index: round(10) / 2; // 使用了函數
  height: (500px/2); // 使用了括號
  margin-left: 5px + 8px/2px; // 算數表達式的一部分
}

編譯為

div {
  font: 16px/30px Arial, Helvetica, sans-serif;
  width: 500px;
  z-index: 5;
  height: 250px;
  margin-left: 9px;
}

% 單位不能和其它單位發生轉化，會報錯 Error: % and px have incompatible units

.container {
  /* ==================+ 運算===================== */
  width: 50 + 20; //70
  width: 50 + 20%; //70%
  width: 10pt + 20; //30pt
  width: 10px + 10; //20px
  width: 50% + 20%; //70%
  width: 10px + 20px; //30px
  width: 10pt + 20px; //25pt
  width: 10px + 20pt; //36.6666666667px;
  
  /* ==================- 運算===================== */
  height: 50 - 30; //20
  height: 10 - 30%; //-20%
  height: 60% - 30%; //30%
  height: 50px - 20px; //30px
  height: 50pt - 20px; //35pt
  height: 50px - 20pt; //23.3333333333px
  height: 50pt - 40; //10pt
  
  /* ==================* 運算===================== */
  height: 50 * 30; //1500
  height: 10 * 30%; //300%
  /* height: 60% * 30%; 出現了兩個百分號,會報錯*/
  /* height: 50px * 20px; 出現了兩個單位,會報錯*/
  height: 50 * 2px; //100px
  height: 50pt * 4; //200pt
  
  /* ==================/運算 (除完后最多只能保留一種單位)===================== */
  $width: 100px;
  width: 10 / 5; //10/5
  width: 10px / 5px; //10px/5px
  width: 10px / 10 * 2; //2px 使用了表達式
  width: 20px / 2px * 5%; //50% 使用了表達式
  width: $width / 2; //50px 使用變量與括號
  z-index: round(10) / 2; //5 使用了函數
  height: (500px / 2); //250px 使用了括號
  
  /* ==================% 運算===================== */
  width: 10 % 3; //1
  width: 50 % 3px; //2px
  width: 50px % 4px; //2px
  width: 50px % 7; //1px
  width: 50% % 7; //1%
  width: 50% % 9%; //5%
  width: 50px % 10pt; //10px 50px % 13.33333px
  width: 50px % 13.33333px; //10.00001px
}

字符串運算：

• 如果有引號字符串（位于 + 左側）連接無引號字符串，運算結果是有引號的，相反，無引號字符串（位于 + 左側）連接有引號字符串，運算結果則沒有引號。
• 如果有一個值是函數返回的，情況可能不一樣？

div {
  content: "foo" + bar;
  content: foo + "bar";
  content: foo + bar;
  content: "foo"+"bar";
}

編譯為

div {
  content: "foobar";
  content: foobar;
  content: foobar;
  content: "foobar";
}

插值語句

類似 js 中的 ${}，主要應用于選擇器、屬性名、屬性值、注釋

• 使用 #{} 時，有引號字符串將被編譯為無引號字符串；

$width: 100px;
$width-size: 10px;
$author: "可可";
$attr: color;
$class-name: danger;
/*
 * @author: #{$author}
 */
div .#{$class-name} {
  border-#{$attr}: palegreen;
  content: #{$author};
}

編譯為

/*
 * @author: 可可
 */
div .danger {
  border-color: palegreen;
  content: 可可;
}

常見函數

https://sass-lang.com/documentation/modules/

Sass 包含很多操作顏色的函數。例如：lighten() 與 darken() 函數可用于調亮或調暗顏色，opacify() 函數使顏色透明度減少，transparent() 函數使顏色透明度增加，mix() 函數可用來混合兩種顏色。

p {
  height: 30px;
}
.p0 {
  background-color: #009de6;
}
.p1 {
  background-color: lighten(#009de6, 30%);
}
.p2 {
  // 讓顏色變暗  通常使用color.scale()代替該方案
  background-color: darken(#009de6, 15%);
}
.p3 {
  // 降低顏色透明度  通常使用color.scale()代替該方案
  // background-color: opacify(#5c7a29,0.5);
  background-color: opacify(rgba(#009de6, 0.1), 0.5);
}

編譯為

p {
  height: 30px;
}

.p0 {
  background-color: #009de6;
}

.p1 {
  background-color: #80d7ff;
}

.p2 {
  background-color: #00699a;
}

.p3 {
  background-color: rgba(0, 157, 230, 0.6);
}

String（字符串函數）

p {
  &:after {
    content: quote(這是里面的內容);
  }
  background-color: unquote($string: "#F00");
  z-index: str-length("sass學習");
}

編譯為

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

List函數

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
}

編譯為

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

Math(數值函數)

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

編譯為

p {
  z-index: 15;
  z-index: 6;
  z-index: 8;
  opacity: 0.4203513348;
}

Map函數

Map函數操作Map，map-get()根據鍵值獲取map中的對應值，map-merge()來將兩個map合并成一個新的map，map-values()映射中的所有值。

$font-sizes: (
  "small": 12px,
  "normal": 18px,
  "large": 24px,
);
$padding: (
  top: 10px,
  right: 20px,
  bottom: 10px,
  left: 30px,
);
p {
  font-size: map-get($font-sizes, "normal"); //18px
  @if map-has-key($padding, "right") {
    padding-right: map-get($padding, "right");
  }
  &:after {
    content: map-keys($font-sizes) + " " + map-values($padding) + "";
  }
}

編譯為

p {
  font-size: 18px;
  padding-right: 20px;
}
p:after {
  content: '"small", "normal", "large" 10px, 20px, 10px, 30px';
}

selector選擇器函數

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

比編譯為

.header {
  background-color: #000;
  content: ".a.b.c";
  content: "a.disabled";
}

流程控制指令

if指令

$color: red;
.top {
  color: if($color==red, #000, #fff);
}

編譯為

.top {
  color: #000;
}

定義一個 css 的三角形 @mixin 聲明

@mixin triangle($direction: top, $size: 30px, $border-color: black) {
  //角方向 尺寸 邊框顏色
  width: 0px;
  height: 0px;
  display: inline-block;
  border-width: $size;
  border-#{$direction}-width: 0;
  @if ($direction==top) {
    border-color: transparent transparent $border-color transparent;
    border-style: dashed dashed solid dashed;
  } @else if($direction==right) {
    border-color: transparent transparent transparent $border-color;
    border-style: dashed dashed dashed solid;
  } @else if($direction==bottom) {
    border-color: $border-color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  } @else if($direction==left) {
    border-color: transparent $border-color transparent transparent;
    border-style: dashed solid dashed dashed;
  }
}
.p0 {
  @include triangle();
}
.p1 {
  @include triangle(right, 20px, green);
}
.p2 {
  @include triangle(bottom, 40px, pink);
}

編譯為

.p0 {
  width: 0px;
  height: 0px;
  display: inline-block;
  border-width: 30px;
  border-top-width: 0;
  border-color: transparent transparent black transparent;
  border-style: dashed dashed solid dashed;
}

.p1 {
  width: 0px;
  height: 0px;
  display: inline-block;
  border-width: 20px;
  border-right-width: 0;
  border-color: transparent transparent transparent green;
  border-style: dashed dashed dashed solid;
}

.p2 {
  width: 0px;
  height: 0px;
  display: inline-block;
  border-width: 40px;
  border-bottom-width: 0;
  border-color: pink transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

使用 mixin 混合模式，會將重復的代碼寫在 css 樣式表中，可以用繼承減少代碼行數

@mixin triangle($direction: top, $size: 30px, $border-color: black) {
  //角方向 尺寸 邊框顏色
  border-width: $size;
  border-#{$direction}-width: 0;
  @if ($direction==top) {
    border-color: transparent transparent $border-color transparent;
    border-style: dashed dashed solid dashed;
  } @else if($direction==right) {
    border-color: transparent transparent transparent $border-color;
    border-style: dashed dashed dashed solid;
  } @else if($direction==bottom) {
    border-color: $border-color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
  } @else if($direction==left) {
    border-color: transparent $border-color transparent transparent;
    border-style: dashed solid dashed dashed;
  }
}

%triangle {
  width: 0px;
  height: 0px;
  display: inline-block;
}
.p0 {
  @extend %triangle;
  @include triangle();
}
.p1 {
  @extend %triangle;
  @include triangle(right, 20px, green);
}
.p2 {
  @extend %triangle;
  @include triangle(bottom, 40px, pink);
}

編譯為

.p2, .p1, .p0 {
  width: 0px;
  height: 0px;
  display: inline-block;
}

.p0 {
  border-width: 30px;
  border-top-width: 0;
  border-color: transparent transparent black transparent;
  border-style: dashed dashed solid dashed;
}

.p1 {
  border-width: 20px;
  border-right-width: 0;
  border-color: transparent transparent transparent green;
  border-style: dashed dashed dashed solid;
}

.p2 {
  border-width: 40px;
  border-bottom-width: 0;
  border-color: pink transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

for指令

@for 指令可以在限制的范圍內重復輸出格式，每次按要求（變量的值）對輸出結果做出變動。這個指令包含兩種格式：@for $var from through ，或者 @for $var from to

當使用 through 時，條件范圍包含與的值。

@for $i from 1 through 4 {
  .p#{$i} {
    width: 200px;
    height: 10px * $i;
    background-color: rgb(
      round(random() * 255),
      round(random() * 255),
      round(random() * 255)
    );
  }
}

編譯為

.p1 {
  width: 200px;
  height: 10px;
  background-color: rgb(25, 5, 2);
}

.p2 {
  width: 200px;
  height: 20px;
  background-color: rgb(242, 205, 156);
}

.p3 {
  width: 200px;
  height: 30px;
  background-color: rgb(235, 18, 162);
}

.p4 {
  width: 200px;
  height: 40px;
  background-color: rgb(238, 165, 231);
}

而使用to 時條件范圍只包含的值不包含 的值。

@for $i from 1 to 4 {
  .p#{$i} {
    width: 200px;
    height: 10px * $i;
    background-color: rgb(
      round(random() * 255),
      round(random() * 255),
      round(random() * 255)
    );
  }
}

編譯為

.p1 {
  width: 200px;
  height: 10px;
  background-color: rgb(71, 202, 171);
}

.p2 {
  width: 200px;
  height: 20px;
  background-color: rgb(171, 45, 10);
}

.p3 {
  width: 200px;
  height: 30px;
  background-color: rgb(208, 231, 121);
}

css 重復樣式改寫

#loading {
  position: fixed;
  top: 200px;
  left: 46%;
}

#loading span {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #3498db;
  opacity: 0.5;
  border-radius: 50%;
  -webkit-animation: loading 1s infinite ease-in-out;
  animation: loading 1s infinite ease-in-out;
}

@for $k from 1 to 6 {
  #loading span:nth-child(#{$k}) {
    left: 20 * ($k - 1) + px;
    animation-delay: 0.2 * ($k - 1) + s;
  }
}
@keyframes loading {
  0% {
    opacity: 0.3;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    background: green;
  }
  100% {
    opacity: 0.3;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

each指令

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

編譯為

.w0 {
  background-color: red;
}

.w1 {
  background-color: pink;
}

.w2 {
  background-color: green;
}

.w3 {
  background-color: turquoise;
}

.w4 {
  background-color: darkmagenta;
}

while 指令

重復輸出格式直到表達式返回結果為 false

$column: 12;

@while $column>0 {
  .col-sm-#{$column} {
    // width: $column / 12 * 100%;
    // width: $column / 12 * 100 + %; 會標紅
    // width: $column / 12 * 100#{"%"};
    width: unquote($string: $column / 12 * 100 + "%");
  }

  $column: $column - 1;
}

編譯為

.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%;
}

自定義函數

@function row_cols_width($column) {
  @return percentage(1 / $column); //b百分比函數
}

@for $i from 1 through 6 {
  .row-col-#{$i} {
    width: row_cols_width($i);
  }
}

編譯為

.row-col-1 {
  width: 100%;
}

.row-col-2 {
  width: 50%;
}

.row-col-3 {
  width: 33.3333333333%;
}

.row-col-4 {
  width: 25%;
}

.row-col-5 {
  width: 20%;
}

.row-col-6 {
  width: 16.6666666667%;
}

多參數：

@function background-linear-gradient(
  $direction,
  $start-color,
  $end-color: blue
) {
  @return linear-gradient($direction, $start-color, $end-color);
}
body {
  background-image: background-linear-gradient(
    $start-color: pink,
    $end-color: blue,
    $direction: top
  );
}

編譯為

body {
  background-image: -webkit-gradient(linear, left top, left bottom, from(pink), to(blue));
  background-image: linear-gradient(top, pink, blue);
}

可變參數：

@function background-linear-gradient($direction, $gradients...) {
  //可變參數
  @return linear-gradient($direction, $gradients);
}
body {
  background-image: background-linear-gradient(
    to top,
    rgb(247, 219, 219),
    rgb(244, 245, 177),
    rgb(183, 212, 255),
    rgb(233, 233, 255)
  );
}

編譯為

body {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(247, 219, 219)), color-stop(rgb(244, 245, 177)), color-stop(rgb(183, 212, 255)), to(rgb(233, 233, 255)));
  background-image: linear-gradient(to top, rgb(247, 219, 219), rgb(244, 245, 177), rgb(183, 212, 255), rgb(233, 233, 255));
}

變量中可變參數，要跟… 不然會報錯

$width: 30px, 20px, 40px, 50px;
.top {
  width: min($width...);
}

編譯為

.top {
  width: 20px;
}

@use的使用

在 Sass 中，使用 :export 語法可以將變量、Mixin、函數等內容導出為模塊，以便在其他文件中引用和使用。這使得可以創建可重用的樣式模塊，并在多個地方進行共享使用。

@use 有模塊的功能能夠重新改變命名空間的名字，是 @import 中的升級版。

• 多次引入同個文件，@use 只會包含一次。

• 默認 @use 引入的是一個模塊，默認以文件名為模塊名，可通過 as 取別名。如果命名為 * 會取消命名空間。

• @use 模塊內定義的默認值 !default，在引入時使用 with() 的方式修改。

• @use 的模塊中可以定義私有變量、mixin、function（以短杠開頭的命名，$-）

@forward的使用

通過 @forward 加載一個模塊的成員，并將這些成員當作自己的成員對外暴露出去，類似于類似于 es6 的 export…，通常用于跨多個文件組織 Sass 庫。

• 轉發合并 SCSS

• 選擇性轉發

• 轉發時定義前綴

• 轉發時配置模塊的成員

• 和 use 一起使用是，建議 use 放到最后

@at-root的使用

可以使被嵌套的選擇器或屬性跳出嵌套。

.parent {
  font-size: 12px;
  @at-root .child {
    font-size: 14px;
    @at-root .grand-child {
      font-size: 16px;
    }
  }
}

編譯為

.parent {
  font-size: 12px;
}
.child {
  font-size: 14px;
}
.grand-child {
  font-size: 16px;
}