半路出家，剛剛入門，作為一名前端菜雞，敲代碼一向都是ctrl+c、ctrl+v一把梭，之前寫css都是噩夢，各種重復的選擇器，子類選擇器充斥著css樣式表。不過最近在學習vue.js的時候，接觸到了sass這個css預編譯器，仿佛打開了新世界的大門，感覺寫樣式時腰也不酸了，腿也不痛了，一口氣能敲一個頁面。所以寫下這篇筆記，目的在于記錄自己的學習歷程。
za.jpg
老規矩，學習的3W
一、什么是sass呢？
這篇不是教科書，所以呢簡單說下，sass是css的升級版，基于Ruby編寫，不懂Ruby?沒事，不會照樣可以學會Sass。具體sass概念可以度娘。
二、為什么我們要使用Sass呢？
開門見山，用了sass，寫起css樣式來，鍵盤帶風，效率飛升，另一方面，sass可以讓你們這些老司機避免翻車，讓你的css代碼將變得更有條理，更簡潔明了，修改起來也變得簡單高效，比步步高點讀機還要更easy。
三、如何使用呢？
安裝方法自行度娘~。我只說下我自己的vue.js項目中如何使用Sass。
哦，這里還要說下，我喜歡用scss文件，scss其實是和Sass同一種，只不過樣式表后綴名不同，另外樣式的寫法稍微區別一丟丟，scss和傳統css寫法一致，sass寫法不帶’{}‘和’;‘，用嚴格的還行和縮進控制。個人認為就這點區別了吧。
我的vue.js項目呢是用vue-cli工具構建的，怎么使用sass呢，安裝依賴嘍~
npm install --save-dev sass-loader
//sass-loader依賴于node-sass
npm install --save-dev node-sass
npm install --save-dev sass
安裝好依賴之后還需要到build目錄下的webpack.base.conf.js文件下的module模塊中的rules中添加規則如下：
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
在組件的style標簽改成如下代碼：
<style rel="stylesheet/scss" lang="scss" scoped>之后呢，就可以在項目中使用SASS了，體驗非一般的css書寫速度吧~
具體的sass語法和特性，下次分享
