技能學(xué)習(xí):學(xué)習(xí)使用Node.js + Vue.js,開發(fā)前端全棧網(wǎng)站-13-1.使用...
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-1.使用sass工具搭建前臺web端頁面
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-2.啟動項目
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-1.使用sass工具搭建前臺web端頁面
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-2.sass工具的變量
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-3.使用flex布局并開始搭建web端
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-4.vue廣告輪播圖，并使用接口引入數(shù)據(jù)
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-5.使用字體圖標(biāo)（iconfont）
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-6.卡片組件的封裝
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-14-1.生產(chǎn)環(huán)境編譯
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-vue.js devtools谷歌插件下載與安裝
關(guān)于sass:
Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發(fā)項目。
點擊鏈接可進(jìn)入sass官網(wǎng)
文件后綴是.scss，在此之前我們先一步一步對頁面進(jìn)行樣式測試。
1.進(jìn)入web端
cd web
npm run serve
如果admin端已經(jīng)開啟8080端口，再開啟web端就是8081端口了。
此時我們在web文件夾中添加style.css文件，設(shè)置頁面樣式：
再到main.js引入該頁面樣式文件：
頁面發(fā)生了變化，效果樣式css的引入沒問題：
2.安裝sass
（1）我們先把style.css文件后綴改為.scss，然后main.js同樣對引入的style文件進(jìn)行修改：
此時頁面報錯，說在web端文件中找不到sass-loader：
（2）我們安裝sass-loader：
cd web
npm i -D sass-loader
由于sass是強化css的輔助工具，所以只在我們開發(fā)時使用sass，待我們項目完成上線時sass就沒有任何作用了。所以我們使用-D在生產(chǎn)環(huán)境安裝。
-D即–dev（生產(chǎn)）
包名會被注冊在package.json的devDependencies里面，僅在開發(fā)環(huán)境下存在的包用-D，如babel，sass-loader這些解析器
可惜，可惜，無論如何都安裝不成功：）想盡一切辦法
最終，我簡單粗暴地安裝了cnpm，使用cnpm下載了node-sass和sass-loader，原因是sass-loader依賴于node-sass，npm都下載不成功，大家如果npm下載不成功也可以使用cnpm：
npm i cnpm
cnpm i node-sass -d
cnpm i sass-loader -d
可能是由于淘寶當(dāng)時引入的cnpm庫中的sass-loader沒有被更新，好像sass安裝后來被官方改為只能由ruby安裝等原因，但是不深究，我們得到結(jié)果就好。
安裝sass-loader成功之后，頁面發(fā)生了變化：
應(yīng)該是sass-loader版本號太高所致，此時vue-cli中使用到的webpack不能使用版本過高的sass-loader，所以我們下載7.3.1版本：
cnpm install [email protected] -D
重新進(jìn)入web端
ctrl + c
y回車
npm run serve
進(jìn)入后頁面再次發(fā)生變化，此時顯示node-sass版本過高，讓我們使用4.0.0版本：
這時我們卸載之前版本的node-sass，安裝4.0.0版本
cnpm uninstall node-sass
cnpm i [email protected] -d
安裝完成后，再次重啟web端。此時頁面正常進(jìn)入：
3.使用sass
因為sass是css工具，所以.scss文件可以使用css一切樣式，這時我們測試第一個功能——嵌套。
首先我們修改當(dāng)前vue頁面元素：
這時我們使用嵌套方法：
就像html語言中的嵌套元素一樣，把元素按父子級嵌套。
p{
color:red;
}
.a{
background:red;
p{
color: blue;
}
}
4.總結(jié)
sass的優(yōu)勢：sass通過變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級功能，增加了效果樣式css的復(fù)用性、美觀性和易讀性。
接下來的文章中我們就會使用sass編輯前端樣式，一起學(xué)習(xí)sass除嵌套以外的其他功能。
更多設(shè)計、功能的學(xué)習(xí)經(jīng)驗，大家也可以去我的公眾號查看！
————