介

scss是sass的另一種語法，Sass是一種CSS預處理器，允許開發者編寫更具結構性、可維護性和動態性的樣式表

scss保持了css的語法結構，同時具備sass的強大功能，可以簡單理解為一種增強版的css，除css含有功能外，還包含但不限于更優的變量、嵌套規則、混合、函數、動態運算等，文件后綴名為scss

安裝與設置

在瀏覽器前端中，正常是不能直接使用scss的，其是一種CSS預處理器，即需要通過編譯，生成對應的css文件，再進行使用

• 首先需要安裝Node.js和npm
• 接著用npm安裝Sass，可以選擇全局安裝-g

• 編譯scss或sass為css

• sass命令后接兩個路徑，第一個路徑example.scss為待編譯的scss文件所在路徑，第二個example.css為生成的css保存路徑，可以用相對路徑也可以用絕對路徑

基礎語法

SCSS整體語法與CSS基本類似，其是CSS的一個超集，在SCSS內寫CSS也是完全可以的

注釋

SCSS的注釋主要有兩種形式，一種為//，另一種為/**/，與Js類似

變量

SCSS的變量用$來聲明，使用時直接通過$ + 名稱調用即可，變量數據可以是數字、字符串、顏色、布爾值、null，甚至還可以是List和Map

變量可以使用在幾乎任何需要的地方，如屬性值，屬性名合成、復雜運算、函數調用等

與CSS變量相比：

• SCSS變量的作用域類似塊作用域，在一個規則內定義的變量只能在該規則及其子規則內使用；CSS變量的作用域是基于DOM樹結構，變量在一個元素作用域內定義，那么在該元素及其子元素的任何作用域(選擇器)內均可使用
• SCSS變量主要在編譯階段使用，其最終會將變量值整合到編譯后的CSS中，相當于變量值的占位符，不會包含在編譯后的CSS中；CSS變量主要在運行時使用，因此也可用JS動態更改

聲明規則：$name: value;

形式與樣式屬性類似，$后接名稱即為變量名，冒號后面跟變量值

變量聲明后，在其之后的位置依舊可以重新聲明賦值

舉個栗子

編譯后的CSS如下：

• 編譯后的CSS是比較簡潔的，SCSS的變量值在經過計算后被整合到CSS中了

了解一下即可，我們在定義值為字符串的變量時，有兩種寫法，帶引號和不帶引號，兩者都能正常使用

帶引號的可用于表達式計算

不帶引號的一般不用于表達式計算(容易報錯)，而是直接使用

內置變量

除了自己定義的變量外，SCSS還包含一些內置變量，其分布在不同模塊內，使用時需另行導入

示例如下

需注意的是，內置變量是不支持重新自定義賦值的

嵌套

在使用CSS寫一些子元素樣式時，很多時候都需要帶上其父元素，以使選擇器更精準或提高其優先級，但當大量書寫類似屬性時，每次都需要帶上其父元素選擇器，這其實的重復的工作

SCSS則可以規避這種情況，其支持嵌套使用

選擇器嵌套

• 子元素選擇器直接嵌套在父元素選擇器規則內即可
• 在選擇器規則內，可用&引用當前選擇器，常用于配合偽類選擇器使用，此時不會發生嵌套行為

編譯后的CSS如下：

屬性嵌套

嵌套除了用在選擇器外，其還可以用在樣式屬性中，如下：

編譯后如下：

算術運算

SCSS支持對變量或值進行運算，支持 +、-、*、/、%、==、!=、>、< 等運算符，對于不同單位之間的運算，運算結果取第一個值的單位，如果值之間只有一個有單位，則運算結果就取該單位

在介紹運算前，先介紹一個新的規則@debug，其用于幫助在開發過程中查看一些變量值或表達式值，SCSS運行后會將@debug后面的內容輸出到控制臺，類似Js的輸出語句

比較運算

普通運算

需要注意的是，除法/比較特殊，其只在以下三種情況會進行除法運算：

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

但是，如果你的SCSS版本較高，可能會收到一個warning警告，官方團隊不推薦直接使用/的形式進行除法運算，這是由于在CSS在/也作為分隔符使用

官方更推薦使用sass:math模塊的math.div函數或calc函數來執行除法運算，如下：

顏色運算

除了普通值運算外，SCSS還支持顏色值之間的運算

需注意的是，這在高版本的SCSS中已經棄用，高版本如需計算顏色，推薦使用sass:color模塊內的顏色函數

插值

插值，即將SCSS表達式用#{}包圍，作用是將SCSS表達式結果嵌入到CSS中

插值幾乎可以使用在SCSS樣式表的所有位置，如：選擇器名、屬性名、屬性值、變量值、動畫名等

編譯后的CSS為：

帶引號字符串

在插值內使用帶引號的字符串時，解析時會將引號去掉

編譯后為：

使用時需思考是否要帶引號，否則可能導致超乎預期的結果

導入

一個項目的樣式往往是很多的，而我們一般不會將其完全放在一個文件內，一般會按某種規則區分，存放于多個文件內，不同文件需共享時就導入

SCSS與CSS具有類似的導入語法@import，其允許多個導入用逗號分隔，導入文件后綴sass/scss可省略，如下：

但是，官方團隊不鼓勵繼續使用該規則，其將在未來幾年內逐步淘汰它，并最終從語言中刪除

原因是：

• @import使所有變量、混入和函數都可以全局訪問，這使得人們很難分辨任何定義的位置
• 由于一切都是全局的，因此庫必須為其所有成員添加前綴，以避免命名沖突
• @extend規則也是全局性的，這使得很難預測哪些樣式規則將被擴展
• 每個樣式表的@import都會被執行，每次編輯時都會重新輸出CSS，這會增加編譯時間并產生臃腫的輸出
• 無法定義下游樣式表無法訪問的私有成員或占位符選擇器

官方更推薦使用@use來導入模塊，以這種方式加載的任何樣式都將在編譯的 CSS 輸出中只包含一次，無論這些樣式被加載了多少次

@use具有和@import同樣的功能，并且它還具有命名空間，以避免命名沖突，默認其命名空間即為文件名，也可以用as設置

對于自己編寫的文件，如果不在意命名沖突，也可完全導入，此時即可直接使用

高級功能

除了一些常見功能外，SCSS還具備一些高級功能，如：控制語句、函數等

條件和循環

條件語句主要使用@if和@else、@else if，效果于常見編程語言類似，如下：

以上SCSS會根據$pos變量值動態選擇生成的justify-content

編譯后CSS為：

循環語句主要有三個：@each、@for和@while

• @each主要可用于變量List或Map

• 編譯后CSS

• @for主要是從一個數字遍歷到另一個數字，有兩種形式：
• @for <索引變量名> from <a> to <b>，這種不包含最后一個數字，范圍為[a, b)
• @for <索引變量名> from <a> through <b>，這種會包含最后一個數字，范圍為[a, b]

• 編譯后的CSS如下：

• @while是基于表達式結果的循環，當結果為false時退出循環

• 編譯后的CSS為：

函數

與Js類似，函數用于封裝、定義一些復雜操作

• 參數：函數的參數主要支持以下幾類：
• 普通參數：與變量名聲明差不多，多個參數用,逗號分隔
• 可選參數：到默認值的參數，默認值可以是任何表達式，甚至可以引用前面的參數
• 任意參數：聲明參數時，參數名最后以...結尾，表示接收余下所有參數
• 返回：需返回值可采用@return返回
• 調用：調用通過函數名調用，括號內傳參數，除了按順序傳參數之外，還可通過關鍵字傳參，即使用參數名后冒號跟值的方式

一些示例如下：

有趣的事實

與所有Scss標識符一樣，函數名稱將連字符和下劃線視為相同，這意味著is-center和is_center兩者都引用相同的函數，這是早期的歷史遺留物，當時它只允許在標識符名稱中使用下劃線

混入

使用@mixin定義，使用@include引用，用于定義一些可以在整個樣式表中重復使用的樣式，其與函數類似，也可執行復雜操作、傳入參數等，主要用于定義一些復雜的、規則的通用樣式

語法如下：

• @mixin <name> {語句}
• @mixin <name> (參數列表) {語句}

引用如下：

• @include <name>
• @include <name>(參數值列表)

一些示例

@content用于表示自定義內容，使用時會將{}內的內容注入到@content所占位置

繼承

繼承是基于選擇器的，其實現一個選擇器可以繼承另一個選擇器的所有樣式，包括組合樣式(如偽類選擇器樣式)

默認瀏覽器樣式不可繼承，因為其不屬于樣式表樣式

示例

編譯后的CSS如下：

編譯與調試

SCSS是一款CSS預處理器，其具備部分高級編程語言的特性，因此其需要經過編譯使用，其也可以進行調試

編譯

SCSS是需要經過編譯，變成CSS才可以正常使用的，這在上面已經提到

編譯單個文件比較簡單，在命令行輸入sass空格后接文件名即可，如需生成對應CSS文件，則在原有命令后再接空格加生成文件名即可

不想每次都運行命令重新編譯，也可以通過添加命令參數--watch以監聽編譯，此時不必關閉控制臺，系統會監聽所編譯SCSS文件的變化，但內容改變則重新編譯，具體如下

如需停止監聽，只需在控制臺按Ctrl + C即可

調試

SCSS提供了幾個命令用于開發調試

• @debug用于輸出調試內容
• @warn用于輸出警告內容，不會終止程序運行編譯，但控制臺會有警告信息
• @error用于輸出錯誤信息，會終止程序運行編譯，同時在控制臺輸出錯誤信息

參考資料

SCSS模塊文檔：https://sass.bootcss.com/documentation/modules.html
SCSS官網：https://sass.bootcss.com

npm install css-loader

// webpack.config.js
module.exports = {
 module: {
 rules: [
 {
 test: /\.css$/,
 use: 'css-loader'
 }
 ]
 }
};

npm install style-loader

// webpack.config.js
module.exports = {
 module: {
 rules: [
 {
 test: /\.css$/,
 use: ['style-loader', 'css-loader']
 }
 ]
 },
}

/* style.css */
body {
 background-color:black;
}
// index.js
import './style.css'

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Webpack App</title>
 <style type="text/css">body {
 background-color:black;
 }</style></head>
 <body>
 <script type="text/javascript" src="bundle.js"></script>
 </body>
</html>

npm install sass-loader

// webpack.config.js
module.exports = {
 module: {
 rules: [
 {
 test: /\.scss$/,
 use: ['style-loader', 'css-loader', 'sass-loader']
 }
 ]
 },
}

npm install url-loader file-loader
// webpack.config.js
module.exports = {
 module: {
 rules: [
 {
 test: /\.scss$/,
 use: ['style-loader', 'css-loader','sass-loader']
 },
 {
 test: /\.(png|jpg|gif)$/,
 use: [
 {
 loader: 'url-loader',
 options: {
 limit: 5000
 }
 }
 ]
 }
 ]
 }
};

body {
 background-image: url('./big-background.png');
}
.icon {
 background-image: url('./icon.png');
}

<style type="text/css">body {
 background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }
.icon {
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>

npm install babel-loader @babel/core @babel/preset-env

module.exports = {
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /(node_modules)/,
 use: {
 loader: 'babel-loader',
 options: {
 presets: ['@babel/preset-env']
 }
 }
 }
 ]
 }
};

import

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

例如：

public.scss

$font-base-color:#333;

index.scss

@import "public";
$color:#666;
.container{
    border-color: $color;
    color: $font-base-color; 
}

編譯后：

.container { border-color: #666; color: #333; }

注意：跟我們普通css里面@import的區別

但是如下的幾種方式，都將作為普通的 CSS 語句，不會導入任何 Sass 文件

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

@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";

局部文件(Partials)

Sass源文件中可以通過@import指令導入其他Sass源文件，被導入的文件就是*局部文件*，局部文件讓Sass模塊化編寫更加容易。

如果一個目錄正在被Sass程序監測，目錄下的所有scss/sass源文件都會被編譯，但通常不希望局部文件被編譯，因為局部文件是用來被導入到其他文件的。如果不想局部文件被編譯，文件名可以以下劃線 （_）開頭

_theme.scss

$border-color:#999;
$background-color:#f2f2f2;

index.scss

@import "public";
@import "theme";
$color:#666;
.container{
    border-color: $border-color;
    color: $font-base-color; 
    background-color: $background-color;
}

編譯后：

.container { border-color: #999; color: #333; background-color: #f2f2f2; }

可以看到，@import 引入的theme.scss，可以沒有下劃線(__)，這是允許的，這也就意味著，同一個目錄下不能同時出現兩個相關名的sass文件（一個不帶，一個帶_），添加下劃線的文件將會被忽略。

嵌套 @import

大多數情況下，一般在文件的最外層（不在嵌套規則內）使用 @import，其實，也可以將 @import 嵌套進 CSS 樣式或者 @media 中，與平時的用法效果相同，只是這樣導入的樣式只能出現在嵌套的層中。

base.scss

.main-color{
    color: #F00;
}

index.scss

.container{
    @import "base";
}

最后生成

.container .main-color { color: #F00; }

注意：被導入的文件不能是局部文件方式（在前面不能加_）