2023-4-23 前端達(dá)人
什么是css預(yù)處理技術(shù)
css預(yù)處理技術(shù)的種類
如此之多的 CSS 預(yù)處理器，那么“我應(yīng)該選擇哪種 CSS 預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門話題，各大技術(shù)論壇也是爭論不休。
到目前為止，在眾多優(yōu)秀的 CSS 預(yù)處理器語言中就屬 Sass、LESS 和 Stylus 最優(yōu)秀。
Sass(Syntactically Awesome StyleSheets)是一種CSS預(yù)處理器(preprocessor)， 是一款強(qiáng)化 CSS 的輔助工具?？梢愿咝У木帉憳邮?，同時實現(xiàn)變量、嵌套、組合、繼承等編程語言功能。
css是一門非程序式語言，沒有變量、函數(shù)、scope(作用域)等概念。
- CSS需要書寫大量看似沒有邏輯的代碼，冗余度比較高
- 不方便維護(hù)及擴(kuò)展，難以復(fù)用
- css沒有很好的計算能力
- 非前端工程師往往會因為缺少CSS編寫經(jīng)驗而很難寫出組織良好且易于維護(hù)的CSS代碼
CSS 預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者只要使用這種語言進(jìn)行CSS的編碼工作就可以了。
“用一種專門的編程語言，進(jìn)行 Web 頁面樣式設(shè)計，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項目使用?！?
sass是最早出現(xiàn)的css預(yù)處理語言，有著比less更強(qiáng)大的功能。采用Ruby語言編寫。
最初版本采用的是嚴(yán)格縮進(jìn)的風(fēng)格（不帶大括號( {} )和分號( ; )，這一語法也導(dǎo)致一開始，sass并不太為開發(fā)者所接受）。
從 V3 版本開始放棄了縮進(jìn)式的風(fēng)格，并完全兼容普通的css代碼，也因此從第三代開始，sass也被稱為scss。
Sass 3 就是 Scss，是Sassy CSS的簡寫，它是CSS3語法的超集，也就是說所有有效的CSS/CSS3樣式也同樣適合于Sass。
對現(xiàn)代編程來說，sass就是scss，也因此，sass現(xiàn)在的擴(kuò)展名為.scss（如果是舊版本的sass，可能擴(kuò)展名會為.sass）。
cmd打開本地命令控制窗口，輸入下面字符串然后回車就裝好了。
npm install -g sass
編譯.scss文件為.css文件：
Sass使用.scss作為文件后綴名，不能直接在< link >標(biāo)簽里使用，需要編譯為 .css文件。 演示：
建一個.scss后綴的文件，如input.scss，寫點基本樣式sass的語法：
在html文件所在的路徑下打開cmd命令控制符，輸入：
//單文件轉(zhuǎn)換命令
sass input.scss:output.css
// 或 sass input.scss output.css
表示把名字為 input.scss 轉(zhuǎn)換成名字為 ouput.css 的文件。
回車后，接下來發(fā)現(xiàn)就得到了css的文件。
使用 : 編譯輸出時，前后不能有空格，即
:前緊跟輸入的scss文件，:后緊跟輸出的css文件。
:冒號形式的命令，常用于編譯文件夾（中的所有sass文件）的輸入輸出。
css文件內(nèi)容如下，可以看出轉(zhuǎn)換好了：
接下來就是老操作了，在HTML里用 < link >標(biāo)簽把css文件引入就行。
但是不可能說寫一句.scss語句就轉(zhuǎn)換一次，太麻煩，所以可以自動轉(zhuǎn)換，當(dāng)我在.scss里寫一句，.css就自動生成一句。在cmd輸入以下：
sass --watch input.scss:ouput.css
表示監(jiān)視變化，當(dāng)input.scss一變化，output.css就變化
空格和冒號對應(yīng)生成css的兩中模式，如果是一對一模式（一個scss生成一個css），使用空格即可；如果是多對多模式，比如一個文件夾生成到另一個文件夾，同時一次性有多個scss文件生成css文件等。
# 編譯 light.scss 和 dark.scss 到 light.css 和 dark.css. > sass light.scss:light.css dark.scss:dark.css
sass --watch fileFolder:outputFolder/css
當(dāng)名字為fileFolder這個文件夾里任意一個.scss后綴的文件變化時，就將其編譯到名字outputFolder/css這個文件夾里面（會自動生成相應(yīng)的.css文件）
可以通過 sass -h 或 sass --help 查看詳細(xì)配置項。
配置選項可以指定編譯后的css的排版、是否生成調(diào)試map、開啟debug等，最常用的是 --style 和 --sourcemap。
--watch監(jiān)聽文件變化
sass使用--watch選項，用于監(jiān)聽scss文件的變化。這樣，當(dāng)scss文件內(nèi)容有改動時，會自動編譯為css。
sass --watch .\firstsass.scss .\firstsass1.css
sass --watch .\scssdir\ .\cssdir\
sass --watch scssdir:cssdir
可以看到，使用 : 可以指定輸出的路徑（文件夾），否則css將默認(rèn)生成在源scss文件所在目錄中。
--style 監(jiān)聽
sass --watch app/sass:public/stylesheets --style=compressed
使用壓縮（compressed）的樣式（style）輸出 css 文件
--style指定css的樣式
--style 的css格式有兩種：expanded（默認(rèn)）、compressed。
舊版本的Ruby實現(xiàn)中有四種樣式，還有
nested、compact。
// 指定編譯格式
sass input.scss:output.css --style=expanded
比如，一個scss文件如下：
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
下面，可以查看expanded、compressed編譯后的css格式。
expanded ：默認(rèn)值，未壓縮的展開的css格式
每個選擇器和聲明單獨一行。
執(zhí)行如下命令編譯：
sass styletest.scss styletest.css --style=expanded
# 或 sass styletest.scss styletest.css
expanded編譯過后的樣式，是標(biāo)準(zhǔn)的沒有經(jīng)過任何壓縮，全部字符展開的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}
live sass compiler是VSCode擴(kuò)展，可以實時地將SASS / SCSS文件編譯/轉(zhuǎn)換為CSS文件。
1.在vscode插件里搜索live sass compiler安裝。
2.安裝后，新建scss文件，在vscode底部狀態(tài)欄中點擊watch sass，此時狀態(tài)為 Watching ，即可自動解析sass為css文件。
在使用live sass compiler插件時，并不是所有的默認(rèn)設(shè)置都如我們所愿，那么，我們來看一下如何自定義設(shè)置。
1.編譯/轉(zhuǎn)換后的文件格式、擴(kuò)展名、保存位置
我們在配置中如下設(shè)置：
"liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" } ]
savePath即為導(dǎo)出后的文件保存位置。
2.去掉編譯時出現(xiàn)的css.map文件
在每個文件編譯后，默認(rèn)設(shè)置下，會同時出現(xiàn)一個map格式的文件，有時并不需要該文件，那么我們?nèi)绾稳サ裟兀?
"liveSassCompile.settings.generateMap": false,
默認(rèn)值為true，我們設(shè)置為false即可。
3.設(shè)置css兼容性前綴
live sass compiler可以在編譯時自動添加CSS兼容性前綴（-webkit-，-moz-，-ms，-o-等），如下設(shè)置：
"liveSassCompile.settings.autoprefix": [ "> 1%", "last 3 versions" ],
其中，
這里也可以設(shè)置為具體的瀏覽器，如下：
"liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ],
總結(jié)
個人配置：
"liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "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 ]
壓縮生成min.css文件 "liveSassCompile.settings.formats": [ // More Complex { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
感覺總體作用不大，還是結(jié)合webpack等工具，實時更新頁面內(nèi)容時，實時編譯scss，而不需要單獨使用該工具。
在目前主流的前端項目中，一般是使用 Webpack 來構(gòu)建我們的前端項目，并且大多數(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
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 藍(lán)藍(lán)設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍(lán)藍(lán)設(shè)計的小編 http://www.teruid.com