. 引言

CSS3之前的CSS都大都是枚舉屬性樣式，而編程語言強大的變量、函數、循環、分支等功能基本都不能在CSS中使用，讓CSS的編程黯淡無光，Sass就是一種增強CSS編程的擴展語言（CSS4也可以期待），有了像Sass這種預處理語言后，CSS的編程不再局限在枚舉屬性了，可以有更廣闊的舞臺。

2. Sass的原理

Sass本質就是在CSS的語法的基礎上增加了自定義的變量、循環、分支、函數、mixin、繼承、運算等功能，讓CSS編程變得異常強大。

當然瀏覽器是不認識Sass語法。開發人員寫完了Sass的語法文件后需要通過工具轉成原始的CSS代碼。

//sass 代碼
//-------------------------------
$fontSize: 12px;
body{ 
 font-size:$fontSize;
}
// 通過工具將上面的sass代碼可以轉成下面的CSS代碼↓↓↓
//css 代碼
//-------------------------------
body{ 
 font-size:12px;
}

3. Sass的編譯環境

Sass代碼的編譯轉換工具可以用sass命令行工具、gulp、開發工具插件、webpack等。

我推薦大家學習階段直接用開發工具的插件自動生成即可。如果你是在項目階段使用，那肯定有自動化的流程構建工具比如：gulp、webpack都有對應的插件或者loader，直接對應配置即可。

老馬推薦vscode的自動編譯Sass文件的插件：Live Sass Compiler

使用方法：

• 第一步： 用vscode打開scss文件。

• 第二步：ctrl+shift+pmac ctrl→command輸入sass選擇入下圖選項

4. Sass的兩種文件后綴

sass有兩種后綴名文件：一種后綴名為sass，語法要求不使用大括號和分號；另一種就是我們這里使用的scss文件，這種和我們平時寫的CSS文件格式差不多，使用大括號和分號。

//文件后綴名為sass的語法
body
 background: #eee
 font-size:12pxp
 background: #0982c1
//文件后綴名為scss的語法 
body {
 background: #eee; 
 font-size:12px;
}
p{ 
 background: #0982c1;
}

老馬推薦使用scss文件后綴及使用括號和分號的編寫方式。

5. Sass中的變量和注釋

5.1 定義變量及使用

Sass的變量必須是$開頭，后面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣）。

$a-color: blue; // 定義變量。
.box { 
 color: $a-color; //=> blue 使用變量
}

用vscode插件轉換一下試試？

5.2 局部變量和全局變量。

變量支持塊級作用域，嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。將局部變量轉換為全局變量可以添加 !global 聲明。

//sass style
//-------------------------------
$a-color: blue; // 全局變量
.box { 
 $a-color: red; // 局部變量，box內部不使用。
 color: $a-color; //=> red 局部變量
}
.child { color: $a-color; //=> blue 全局變量
 $main-width: 16em !global; // 在局部定義全局的變量。
}
.main { 
 width: $main-width; // 使用在內部定義的全局變量。
}
/*===============生成的CSS代碼===================*/
.box { 
 color: red;
}
.child { 
 color: blue;
}
.main { 
 width: 16em;
}

從以上代碼中也可以看到Sass支持CSS的注釋/**/之外還支持雙斜線的注釋: //

5.3 特殊變量

如果變量作為CSS屬性或在某些特殊情況下等則必須要以 #{$variables}形式使用。

//sass style
//-------------------------------
$side: top;
.box { 
 border-#{$side}: 1px solid #09c;
}
//css style
//-------------------------------
.box { 
 border-top: 1px solid #0098cc;
}

6. 嵌套(Nesting)

6.1 嵌套規則 (Nested Rules)

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

//sass style
//-------------------------------
#main p { 
 color: #00ff00; 
 width: 97%; 
 .redbox { 
 background-color: #ff0000; 
 color: #000000;
 }
}
//css style
//-------------------------------
#main p { 
 color: #00ff00; 
 width: 97%;
}
#main p .redbox { 
 background-color: #ff0000; 
 color: #000000;
}

6.2 父選擇器 & (Referencing Parent Selectors: &)

在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選擇器，可以用 & 代表嵌套規則外層的父選擇器。

//sass style
//-------------------------------
.box { 
 border-#{$side}: 1px solid #09c;
 &::before { 
 content: ''; 
 display: block; 
 position: absolute; 
 left: 100px; 
 top: 5px;
 }
}
//css style
//-------------------------------
.box { 
 border-top: 1px solid #09c;
}
.box::before { 
 content: ''; display: block; position: absolute; left: 100px; top: 5px;
}

& 必須作為選擇器的第一個字符，其后可以跟隨后綴生成復合的選擇器。

//sass style
//-------------------------------
#main { 
 color: black;
 &-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main { 
 color: black;
}
#main-sidebar { 
 border: 1px solid;
}

6.3 @at-root

@at-root用來跳出當前選擇器嵌套。

//sass style
//-------------------------------
.demo {
 ... 
 animation: motion 3s infinite;
 @at-root {
 @keyframes motion {
 ...
 }
 }
}
//css style
//------------------------------- 
.demo {
 ... 
 animation: motion 3s infinite;
}
@keyframes motion {
 ...
}

7. 運算

Sass支持多種數據類型的變量，比如：

• 數字，1, 2, 13, 10px

• 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz

• 顏色，blue, #04a3f9, rgba(255,0,0,0.5)

• 布爾型，true, false

• 空值，null

所有數據類型均支持相等運算==或 !=，此外，每種數據類型也有其各自支持的運算方式。

7.1 數值運算

Sass支持數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。

//sass style
//-------------------------------
.box { 
 height: 17px + 20px; //=> 37px 數字加法運算
 width: (75rem/16); //=> 4.6875rem 除法運算
 color: #303030*2; //=> #606060; 乘法運算（顏色運算）
 padding: 20px - 3; //=> 17pex 數字減法
 font-family: sans- + "serif"; //=> sans-serif 字符串加法
 width: 1em + (2em * 3); // 帶括號的運算
}
//css style
//------------------------------- 
.box { 
 height: 37px; 
 width: 4.6875rem; 
 color: #606060; 
 padding: 17px; 
 font-family: sans-serif; 
 width: 7em;
}

8. Sass語句

Sass提供了常用的循環、判斷分支語句的相關指令，可以讓我們按照編程語言一樣編寫Sass代碼。

8.1 if語句

當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的代碼。

//sass style
//------------------------------- 
$w: 960px;
$type: monster;
.box {
 @if 2*3 > 5 { // 簡單if判斷語句
 color: red;
 }
 @if $w > 900px { width: $w;
 } @else { // if else 語句
 width: 900px;
 }
 @if $type==ocean { // 多個if和else語句
 color: blue;
 } @else if $type==matador { 
 color: red;
 } @else if $type==monster { 
 color: green;
 } @else { 
 color: black;
 }
}
//css style
//------------------------------- 
.box { 
 color: red; 
 width: 960px; 
 color: green;
}

@if 聲明后面可以跟多個 @else if 聲明，或者一個 @else 聲明。如果 @if 聲明失敗，Sass 將逐條執行 @else if 聲明，如果全部失敗，最后執行 @else 聲明

8.2 for循環語句

@for 指令可以在限制的范圍內重復輸出格式。類似for循環。兩種格式：

• @for $var from <start> through <end> :條件范圍包含 <start> 與 <end> 的值

• @for $var from <start> to <end>: 圍只包含 <start> 的值不包含 <end> 的值

//scss style
//------------for througth循環------------------- 
@for $i from 1 through 3 { 
 .item-#{$i} { width: 2em * $i; }
}
//css style
//------------------------------- 
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }

//scss style//------------for to 循環------------------- 
@for $i from 1 to 3 { 
 .item-#{$i} { width: 2em * $i; }
}
//css style
//------------------------------- 
.item-1 { width: 2em; }
.item-2 { width: 4em; }

8.3 each循環

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

//sass style
//------------------------------- 
@each $animal in puma, sea-slug, egret, salamander {
 .#{$animal}-icon { 
 background-image: url('/images/#{$animal}.png');
 }
}
//css style//-------------------------------
.puma-icon { 
 background-image: url("/images/puma.png");
}
.sea-slug-icon { 
 background-image: url("/images/sea-slug.png");
}
.egret-icon { 
 background-image: url("/images/egret.png");
}
.salamander-icon { 
 background-image: url("/images/salamander.png");
}

復雜對應each

//sass style
//------------------------------- 
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
 #{$header} { 
 font-size: $size;
 }
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

9. 混合指令 (Mixin Directives)

9.1 不帶參數的簡單Mixin

混合指令（Mixin）用于定義可重復使用的樣式，可以直接把一整段Sass代碼替換到某個地方去。

//sass style
//------------------------------- 
// 定義mixin reset, 用@mixin開頭，后面跟空格和混合塊的名字。然后是語句塊
@mixin reset { 
 padding: 0; margin: 0;
}
html, body, div , input {
 @include reset(); // 引用 reset 混合塊。用@include指令引用混合塊。
}
//css style
//-------------------------------
html, body, div, input { 
 padding: 0; 
 margin: 0;
}

9.2 帶參數的Mixin

Mixin還可也添加參數，跟函數一樣使用。

//sass style
//------------------------------- 
@mixin sexy-border($color, $width) { 
 border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }
//css style
//-------------------------------
p { 
 border: 1px solid blue;
}

10. 函數指令 (Function Directives)

雖然Mixin功能強大，但是某些場景下還是函數應用更方便，Sass也提供了自定義函數的用法。

//sass style
//------------------------------- 
$grid-width: 40px;
$gutter-width: 10px;
// 定義自定義函數 grid-width
@function grid-width($n) { // 接受一個參數$n
 @return $n * $grid-width + ($n - 1) * $gutter-width; // 返回值。
}
#sidebar { width: grid-width(5); } // 在屬性中調用函數
//css style
//-------------------------------
#sidebar { 
 width: 240px;
}

11. 繼承(擴展)

11.1 基本繼承

sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，并聯合聲明。使用選擇器的繼承，要使用關鍵詞 @extend，后面緊跟需要繼承的選擇器。

//sass style
//-------------------------------
h1{ 
 border: 4px solid #ff9aa9;
}
.speaker{
 @extend h1; 
 border-width: 2px;
}
//css style
//-------------------------------
h1, .speaker{ 
 border: 4px solid #ff9aa9;
}
.speaker{ 
 border-width: 2px;
}

11.2 占位符%

可以定義占位選擇器 %。這種選擇器的優勢在于：如果不調用則不會有任何多余的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然后實際應用中不管是否使用了 @extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以 %標識定義，通過 @extend調用。

//sass style
//------------------------------- 
%ir { // 定義占位符。沒有選擇器名字的一段代碼而已。
 color: transparent; 
 text-shadow: none; 
 background-color: transparent; 
 border: 0;
}
#header{ 
 h1{
 @extend %ir; 
 width:300px;
 }
}
.ir{
 @extend %ir;
}
//css style
//-------------------------------
#header h1, .ir { 
 color: transparent; 
 text-shadow: none; 
 background-color: transparent; 
 border: 0;
}
#header h1 { 
width: 300px;
}

12. 導入文件

Sass的導入( @import)Sass文件規則和CSS的有所不同，編譯時會將 @import的scss文件合并進來只生成一個CSS文件。但是如果你在Sass文件中導入css文件如 @import 'reset.css'，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合并到編譯后的文件中，而是以 @import方式存在。

所有的Sass導入文件都可以忽略后綴名 .scss。一般來說基礎的文件命名方法以_開頭，如 _mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成 @import "mixin"。

例如： a.scss 文件

//a.scss
//-------------------------------
body { 
background: #eee;
}

main.scss 主文件。

2019年6月25日，白鷺引擎發布 5.2.22版本，在5.2.20版本中，2D渲染 – JavaScript和微信小游戲修復、優化多個問題，OPPO小游戲優化對聲音的支持，推薦各位開發者更新體驗。

2D 渲染 - JavaScript

[修復]修復htmlSound 音頻初始加載時銷毀錯誤的問題。

[優化]在Mac上的Safari瀏覽器中，默認使用web audio的方式播放音頻。

[優化]重命名插件RenamePlugin增加設置回調函數，獲取文件的相關信息。

微信小游戲 v1.1.17

[優化]移除無效的報錯信息。

[優化]優化資源管理模塊中 binary 的加載方式。

OPPO 小游戲 v0.1.5

[優化]優化對聲音的支持。