關于sass: Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發項目。 點擊鏈接可進入sass官網 文件后綴是.scss，在此之前我們先一步一步對頁面進行樣式測試。 1.進入web端 ``` cd web ``` ``` npm run serve ```  如果admin端已經開啟8080端口，再開啟web端就是8081端口了。  此時我們在web文件夾中添加style.css文件，設置頁面樣式：  再到main.js引入該頁面樣式文件：  頁面發生了變化，效果樣式css的引入沒問題：  2.安裝sass （1）我們先把style.css文件后綴改為.scss，然后main.js同樣對引入的style文件進行修改：  此時頁面報錯，說在web端文件中找不到sass-loader：  （2）我們安裝sass-loader： ``` cd web ``` ``` npm i -D sass-loader ``` 由于sass是強化css的輔助工具，所以只在我們開發時使用sass，待我們項目完成上線時sass就沒有任何作用了。所以我們使用-D在生產環境安裝。 -D即–dev（生產） 包名會被注冊在package.json的devDependencies里面，僅在開發環境下存在的包用-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 ```  可能是由于淘寶當時引入的cnpm庫中的sass-loader沒有被更新，好像sass安裝后來被官方改為只能由ruby安裝等原因，但是不深究，我們得到結果就好。  安裝sass-loader成功之后，頁面發生了變化：  應該是sass-loader版本號太高所致，此時vue-cli中使用到的webpack不能使用版本過高的sass-loader，所以我們下載7.3.1版本： ``` cnpm install sass-loader@7.3.1 -D ```  重新進入web端 ctrl + c y回車 ``` npm run serve ``` 進入后頁面再次發生變化，此時顯示node-sass版本過高，讓我們使用4.0.0版本：  這時我們卸載之前版本的node-sass，安裝4.0.0版本 ``` cnpm uninstall node-sass ``` ``` cnpm i node-sass@4.14.1 -d ``` 安裝完成后，再次重啟web端。此時頁面正常進入：  3.使用sass 因為sass是css工具，所以.scss文件可以使用css一切樣式，這時我們測試第一個功能——嵌套。 首先我們修改當前vue頁面元素：   這時我們使用嵌套方法： 就像html語言中的嵌套元素一樣，把元素按父子級嵌套。 ``` p{ color:red; } .a{ background:red; p{ color: blue; } } ```  4.總結 sass的優勢：sass通過變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，增加了效果樣式css的復用性、美觀性和易讀性。 接下來的文章中我們就會使用sass編輯前端樣式，一起學習sass除嵌套以外的其他功能。