1.介紹
1.1 CSS預(yù)處理技術(shù)，及種類(lèi)介紹
什么是css預(yù)處理技術(shù)
-
CSS 預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專(zhuān)門(mén)的編程語(yǔ)言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。
-
通俗的說(shuō)，“CSS 預(yù)處理器用一種專(zhuān)門(mén)的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的 CSS 文件，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題”，例如你可以在 CSS 中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)（如變量$main-color）等等在編程語(yǔ)言中的一些基本特性，可以讓你的 CSS 更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。
css預(yù)處理技術(shù)的種類(lèi)
-
Sass（SCSS）
-
LESS
-
Stylus
-
Turbine
-
Swithch CSS
-
CSS Cacheer
-
DT CSS
如此之多的 CSS 預(yù)處理器，那么“我應(yīng)該選擇哪種 CSS 預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門(mén)話(huà)題，各大技術(shù)論壇也是爭(zhēng)論不休。
到目前為止，在眾多優(yōu)秀的 CSS 預(yù)處理器語(yǔ)言中就屬 Sass、LESS 和 Stylus 最優(yōu)秀。
1.2 什么是sass
Sass(Syntactically Awesome StyleSheets)是一種CSS預(yù)處理器(preprocessor)， 是一款強(qiáng)化 CSS 的輔助工具。可以高效的編寫(xiě)樣式，同時(shí)實(shí)現(xiàn)變量、嵌套、組合、繼承等編程語(yǔ)言功能。
css是一門(mén)非程序式語(yǔ)言，沒(méi)有變量、函數(shù)、scope(作用域)等概念。
-
CSS需要書(shū)寫(xiě)大量看似沒(méi)有邏輯的代碼，冗余度比較高
-
不方便維護(hù)及擴(kuò)展，難以復(fù)用
-
css沒(méi)有很好的計(jì)算能力
-
非前端工程師往往會(huì)因?yàn)槿鄙貱SS編寫(xiě)經(jīng)驗(yàn)而很難寫(xiě)出組織良好且易于維護(hù)的CSS代碼
CSS 預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專(zhuān)門(mén)的編程語(yǔ)言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開(kāi)發(fā)者只要使用這種語(yǔ)言進(jìn)行CSS的編碼工作就可以了。
“用一種專(zhuān)門(mén)的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)，再通過(guò)編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項(xiàng)目使用。”
2.關(guān)于scss和sass
sass是最早出現(xiàn)的css預(yù)處理語(yǔ)言，有著比less更強(qiáng)大的功能。采用Ruby語(yǔ)言編寫(xiě)。
最初版本采用的是嚴(yán)格縮進(jìn)的風(fēng)格（不帶大括號(hào)( {} )和分號(hào)( ; )，這一語(yǔ)法也導(dǎo)致一開(kāi)始，sass并不太為開(kāi)發(fā)者所接受）。
從 V3 版本開(kāi)始放棄了縮進(jìn)式的風(fēng)格，并完全兼容普通的css代碼，也因此從第三代開(kāi)始，sass也被稱(chēng)為scss。
Sass 3 就是 Scss，是Sassy CSS的簡(jiǎn)寫(xiě)，它是CSS3語(yǔ)法的超集，也就是說(shuō)所有有效的CSS/CSS3樣式也同樣適合于Sass。
對(duì)現(xiàn)代編程來(lái)說(shuō)，sass就是scss，也因此，sass現(xiàn)在的擴(kuò)展名為.scss（如果是舊版本的sass，可能擴(kuò)展名會(huì)為.sass）。
3.安裝和命令行編譯
cmd打開(kāi)本地命令控制窗口，輸入下面字符串然后回車(chē)就裝好了。
npm install -g sass
編譯.scss文件為.css文件：
Sass使用.scss作為文件后綴名，不能直接在< link >標(biāo)簽里使用，需要編譯為 .css文件。 演示：
-
建一個(gè)html文件，隨便寫(xiě)個(gè)h1標(biāo)簽：
-
建一個(gè).scss后綴的文件，如input.scss，寫(xiě)點(diǎn)基本樣式sass的語(yǔ)法：
-
在html文件所在的路徑下打開(kāi)cmd命令控制符，輸入：
//單文件轉(zhuǎn)換命令
sass input.scss:output.css
// 或 sass input.scss output.css
表示把名字為 input.scss 轉(zhuǎn)換成名字為 ouput.css 的文件。
回車(chē)后，接下來(lái)發(fā)現(xiàn)就得到了css的文件。
使用 : 編譯輸出時(shí)，前后不能有空格，即 : 前緊跟輸入的scss文件，: 后緊跟輸出的css文件。
: 冒號(hào)形式的命令，常用于編譯文件夾（中的所有sass文件）的輸入輸出。
css文件內(nèi)容如下，可以看出轉(zhuǎn)換好了：
接下來(lái)就是老操作了，在HTML里用 < link >標(biāo)簽把css文件引入就行。
-
但是不可能說(shuō)寫(xiě)一句.scss語(yǔ)句就轉(zhuǎn)換一次，太麻煩，所以可以自動(dòng)轉(zhuǎn)換，當(dāng)我在.scss里寫(xiě)一句，.css就自動(dòng)生成一句。在cmd輸入以下：
sass --watch input.scss:ouput.css
表示監(jiān)視變化，當(dāng)input.scss一變化，output.css就變化
空格和冒號(hào)對(duì)應(yīng)生成css的兩中模式，如果是一對(duì)一模式（一個(gè)scss生成一個(gè)css），使用空格即可；如果是多對(duì)多模式，比如一個(gè)文件夾生成到另一個(gè)文件夾，同時(shí)一次性有多個(gè)scss文件生成css文件等。
> sass light.scss:light.css dark.scss:dark.css
sass --watch fileFolder:outputFolder/css
當(dāng)名字為fileFolder這個(gè)文件夾里任意一個(gè).scss后綴的文件變化時(shí)，就將其編譯到名字outputFolder/css這個(gè)文件夾里面（會(huì)自動(dòng)生成相應(yīng)的.css文件）
4.Sass文件編譯快覽
4.1 命令行編譯配置選項(xiàng)
可以通過(guò) sass -h 或 sass --help 查看詳細(xì)配置項(xiàng)。
配置選項(xiàng)可以指定編譯后的css的排版、是否生成調(diào)試map、開(kāi)啟debug等，最常用的是 --style 和 --sourcemap。
4.2 --watch監(jiān)聽(tīng)文件變化
sass使用--watch選項(xiàng)，用于監(jiān)聽(tīng)scss文件的變化。這樣，當(dāng)scss文件內(nèi)容有改動(dòng)時(shí)，會(huì)自動(dòng)編譯為css。
-
監(jiān)聽(tīng)單個(gè)scss文件
sass --watch .\firstsass.scss .\firstsass1.css
sass --watch .\scssdir\ .\cssdir\
sass --watch scssdir:cssdir
可以看到，使用 : 可以指定輸出的路徑（文件夾），否則css將默認(rèn)生成在源scss文件所在目錄中。
-
結(jié)合
--style 監(jiān)聽(tīng)
sass --watch app/sass:public/stylesheets --style=compressed
使用壓縮（compressed）的樣式（style）輸出 css 文件
4.3 --style指定css的樣式
--style 的css格式有兩種：expanded（默認(rèn)）、compressed。
舊版本的Ruby實(shí)現(xiàn)中有四種樣式，還有nested、compact。
// 指定編譯格式
sass input.scss:output.css --style=expanded
比如，一個(gè)scss文件如下：
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
下面，可以查看expanded、compressed編譯后的css格式。
-
expanded ：默認(rèn)值，未壓縮的展開(kāi)的css格式
每個(gè)選擇器和聲明單獨(dú)一行。
執(zhí)行如下命令編譯：
sass styletest.scss styletest.css --style=expanded
# 或 sass styletest.scss styletest.css
expanded編譯過(guò)后的樣式，是標(biāo)準(zhǔn)的沒(méi)有經(jīng)過(guò)任何壓縮，全部字符展開(kāi)的css格式：
.box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }
-
compressed 去除所有的空白字符，全部css內(nèi)容壓縮為一行
生產(chǎn)環(huán)境中推薦的css格式。
執(zhí)行如下命令編譯，將css結(jié)果輸出在命令行中：
sass --style=compressed styletest.scss
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
5.使用VSCode插件編譯
5.1 基本使用
live sass compiler是VSCode擴(kuò)展，可以實(shí)時(shí)地將SASS / SCSS文件編譯/轉(zhuǎn)換為CSS文件。
-
可以自動(dòng)添加css兼容性前綴，-webkit-，-moz-，-ms，-o-等。
-
可以自定義css文件解析后的代碼樣式（expanded 展開(kāi)，compact，compressed 壓縮，nested）。
-
可自定義編譯/轉(zhuǎn)換后的文件擴(kuò)展名（.css或.min.css）。
1.在vscode插件里搜索live sass compiler安裝。
2.安裝后，新建scss文件，在vscode底部狀態(tài)欄中點(diǎn)擊watch sass，此時(shí)狀態(tài)為 Watching ，即可自動(dòng)解析sass為css文件。
5.2 自定義設(shè)置
在使用live sass compiler插件時(shí)，并不是所有的默認(rèn)設(shè)置都如我們所愿，那么，我們來(lái)看一下如何自定義設(shè)置。
1.編譯/轉(zhuǎn)換后的文件格式、擴(kuò)展名、保存位置
-
文件格式
格式可以是expanded，compact，compressed或nested。默認(rèn)值為 expanded。
-
擴(kuò)展名
擴(kuò)展名可以是.css或.min.css。默認(rèn)值為.css。
-
保存位置
默認(rèn)的轉(zhuǎn)換后的css文件保存在scss文件的同級(jí)目錄下，但實(shí)際，我們通常需要把所有scss文件保存在scss文件夾，而css文件希望保存在css的文件夾，如圖所示：
我們?cè)谂渲弥腥缦略O(shè)置：
"liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" } ]
savePath即為導(dǎo)出后的文件保存位置。
2.去掉編譯時(shí)出現(xiàn)的css.map文件
在每個(gè)文件編譯后，默認(rèn)設(shè)置下，會(huì)同時(shí)出現(xiàn)一個(gè)map格式的文件，有時(shí)并不需要該文件，那么我們?nèi)绾稳サ裟兀?
"liveSassCompile.settings.generateMap": false,
默認(rèn)值為true，我們?cè)O(shè)置為false即可。
3.設(shè)置css兼容性前綴
live sass compiler可以在編譯時(shí)自動(dòng)添加CSS兼容性前綴（-webkit-，-moz-，-ms，-o-等），如下設(shè)置：
"liveSassCompile.settings.autoprefix": [ "> 1%", "last 3 versions" ],
其中，
-
">1%"是指 通過(guò)全球使用情況統(tǒng)計(jì)信息選擇出的高于1%使用率的瀏覽器版本。
-
"last 3 versions"是指 每個(gè)瀏覽器的最后3個(gè)版本。
這里也可以設(shè)置為具體的瀏覽器，如下：
"liveSassCompile.settings.autoprefix": [ "ie >= 6", "firefox >= 8", "chrome >= 24", "Opera>=10" ],
總結(jié)
個(gè)人配置：
"liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ "ie >= 6", "firefox >= 8", "chrome >= 24", "Opera>=10" ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }, "liveSassCompile.settings.showOutputWindow": true ]
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
壓縮生成min.css文件 "liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ]
感覺(jué)總體作用不大，還是結(jié)合webpack等工具，實(shí)時(shí)更新頁(yè)面內(nèi)容時(shí)，實(shí)時(shí)編譯scss，而不需要單獨(dú)使用該工具。
6.使用webpack編譯
在目前主流的前端項(xiàng)目中，一般是使用 Webpack 來(lái)構(gòu)建我們的前端項(xiàng)目，并且大多數(shù)都跑在 Node 環(huán)境下。
行如下命令安裝 sass-loader ：
npm install mini-css-extract-plugin -D npm install css-loader -D npm install sass-loader --save-dev
webpack.config.js
