半路出家戴涝，剛剛?cè)腴T朱巨，作為一名前端菜雞，敲代碼一向都是ctrl+c、ctrl+v一把梭咖熟，之前寫css都是噩夢，各種重復的選擇器臣嚣，子類選擇器充斥著css樣式表颅停。不過最近在學習vue.js的時候，接觸到了sass這個css預編譯器具温，仿佛打開了新世界的大門蚕涤，感覺寫樣式時腰也不酸了，腿也不痛了铣猩，一口氣能敲一個頁面揖铜。所以寫下這篇筆記，目的在于記錄自己的學習歷程达皿。
老規(guī)矩天吓，學習的3W
一、什么是sass呢峦椰？
這篇不是教科書龄寞，所以呢簡單說下，sass是css的升級版汤功，基于Ruby編寫物邑，不懂Ruby?沒事，不會照樣可以學會Sass。具體sass概念可以度娘色解。
二茂嗓、為什么我們要使用Sass呢？
開門見山科阎，用了sass在抛，寫起css樣式來，鍵盤帶風萧恕，效率飛升刚梭，另一方面，sass可以讓你們這些老司機避免翻車票唆，讓你的css代碼將變得更有條理朴读，更簡潔明了，修改起來也變得簡單高效走趋，比步步高點讀機還要更easy衅金。
三、如何使用呢簿煌？
安裝方法自行度娘~氮唯。我只說下我自己的vue.js項目中如何使用Sass。
哦姨伟，這里還要說下惩琉，我喜歡用scss文件，scss其實是和Sass同一種夺荒，只不過樣式表后綴名不同瞒渠，另外樣式的寫法稍微區(qū)別一丟丟，scss和傳統(tǒng)css寫法一致技扼，sass寫法不帶’{}‘和’;‘伍玖，用嚴格的還行和縮進控制。個人認為就這點區(qū)別了吧剿吻。
我的vue.js項目呢是用vue-cli工具構(gòu)建的窍箍，怎么使用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中添加規(guī)則如下：
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
在組件的style標簽改成如下代碼：
<style rel="stylesheet/scss" lang="scss" scoped>之后呢丽旅，就可以在項目中使用SASS了椰棘，體驗非一般的css書寫速度吧~
具體的sass語法和特性，下次分享
