技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-1.使用sass工具搭建前臺(tái)web端頁面

技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-2.啟動(dòng)項(xiàng)目
技能學(xué)習(xí)：學(xué)習(xí)使用Node.js + Vue.js，開發(fā)前端全棧網(wǎng)站-13-1.使用sass工具搭建前臺(tái)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 是一款強(qiáng)化 CSS 的輔助工具，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發(fā)項(xiàng)目。
點(diǎn)擊鏈接可進(jìn)入sass官網(wǎng)

文件后綴是.scss，在此之前我們先一步一步對(duì)頁面進(jìn)行樣式測(cè)試。

1.進(jìn)入web端

cd web

npm run serve

如果admin端已經(jīng)開啟8080端口，再開啟web端就是8081端口了。

此時(shí)我們?cè)趙eb文件夾中添加style.css文件，設(shè)置頁面樣式：

再到main.js引入該頁面樣式文件：

頁面發(fā)生了變化，效果樣式css的引入沒問題：

2.安裝sass

（1）我們先把style.css文件后綴改為.scss，然后main.js同樣對(duì)引入的style文件進(jìn)行修改：

此時(shí)頁面報(bào)錯(cuò)，說在web端文件中找不到sass-loader：
（2）我們安裝sass-loader：

cd web

npm i -D sass-loader

由于sass是強(qiáng)化css的輔助工具，所以只在我們開發(fā)時(shí)使用sass，待我們項(xiàng)目完成上線時(shí)sass就沒有任何作用了。所以我們使用-D在生產(chǎn)環(huán)境安裝。

-D即–dev（生產(chǎn)）
包名會(huì)被注冊(cè)在package.json的devDependencies里面，僅在開發(fā)環(huán)境下存在的包用-D，如babel，sass-loader這些解析器

可惜，可惜，無論如何都安裝不成功：）想盡一切辦法
最終，我簡(jiǎn)單粗暴地安裝了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)時(shí)引入的cnpm庫中的sass-loader沒有被更新，好像sass安裝后來被官方改為只能由ruby安裝等原因，但是不深究，我們得到結(jié)果就好。

安裝sass-loader成功之后，頁面發(fā)生了變化：

應(yīng)該是sass-loader版本號(hào)太高所致，此時(shí)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ā)生變化，此時(shí)顯示node-sass版本過高，讓我們使用4.0.0版本：

這時(shí)我們卸載之前版本的node-sass，安裝4.0.0版本

cnpm uninstall node-sass

cnpm i [email protected] -d

安裝完成后，再次重啟web端。此時(shí)頁面正常進(jìn)入：

3.使用sass

因?yàn)閟ass是css工具，所以.scss文件可以使用css一切樣式，這時(shí)我們測(cè)試第一個(gè)功能——嵌套。
首先我們修改當(dāng)前vue頁面元素：


這時(shí)我們使用嵌套方法：
就像html語言中的嵌套元素一樣，把元素按父子級(jí)嵌套。

p{
color:red;
}
.a{
background:red;
    p{
color: blue;
}
}

4.總結(jié)

sass的優(yōu)勢(shì)：sass通過變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，增加了效果樣式css的復(fù)用性、美觀性和易讀性。
接下來的文章中我們就會(huì)使用sass編輯前端樣式，一起學(xué)習(xí)sass除嵌套以外的其他功能。

更多設(shè)計(jì)、功能的學(xué)習(xí)經(jīng)驗(yàn)，大家也可以去我的公眾號(hào)查看！

————