vue2.0中使用sass

第一部分：Sass語言

      Sass是一種強大的css擴展語言（css自己並非一門語言），它容許你使用變量、嵌套規則、mixins、導入等css沒有但開發語言（如Java、C#、Ruby等）有的一些特性，而且徹底兼容CSS語法。Sass有助於保持大型樣式表結構良好。

      Sass有兩種語法。

      一種稱爲SCSS，是一個CSS3語法的擴充版本，也就是說，全部符合CSS3語法的樣式表也都是具備相同語法意義的SCSS文件，SCSS樣式表文件要以.scss擴展名結尾。在vue中，咱們能夠使用<style lang="scss"></style>來標誌裏面的內容是以SCSS語法來書寫的。

      一種稱爲SASS，是Sass之前的語法，它和python同樣，沒有{}大括號來標誌程序塊，而是以縮進來標誌嵌套層級；並且也不使用分號，而是用換行符來分隔屬性。SASS樣式表文件要以.sass擴展名結尾。在vue中，咱們能夠使用<style lang="sass"></style>來標誌裏面的內容是以SASS語法來書寫的。

 

第二部分、VUE2.0中集成Sass   

      Step1：在項目中安裝Sass      

1 npm install node-sass --save-dev 2 npm install sass-loader --save-dev

       PS：有時由於網絡緣由，安裝起來比較慢，這裏推薦的和你們的同樣，使用淘寶的，能夠臨時用一下淘寶的鏡像，不用非得將默認的鏡像源更新爲淘寶的。以下所示：      

1 $ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

       說明：

      --registry=https://registry.npm.taobao.org 淘寶npm包鏡像

      --disturl=https://npm.taobao.org/dist 淘寶node源碼鏡像，一些二進制包編譯時用

      --sass-binary-site=http://npm.taobao.org/mirrors/node-sass 這個纔是node-sass鏡像   

  Step2：配置Sass解析器

      在webpack.base.conf.js中，modules結節下的loaders結節中添加es2015的支持，以下所示：      

 1 module: {  2  loaders: [  3  {  4                 test: /\.js$/,  5                 exclude: /(node_modules|bower_components)/,  6                 loader: 'babel',  7  query: {  8                     presets: ['es2015']  9  } 10  } 11  ], 12 }

      PS：不安裝的話會出現以下錯誤：Couldn't find preset "es2015" relative to directory

      一樣是在webpack.base.conf.js中，modules結節下的rules節點中添加sass的解析器，以下所示：      

1 module: { 2  rules: [ 3  { 4         test: /\.scss$/, 5         loaders: ["style", "css", "sass"] 6       },

 

  Step3：嘗試使用Sass的SASS語法

     如下是使用傳統的CSS樣式的頁面：

      

      樣式以下：      

1 <style> 2  .body {
3  color:red;
4   }
5 </style>

       咱們修改樣式爲：      

 

1 <style lang="sass"> 2  $body-color: red; 3 
4  .body 5  color: $body-color; 6 </style>

        樣式依然生效。

  Step4：嘗試使用Sass的SCSS語法 

1 <style lang="scss"> 2  $body-color:red; 3  .body {
4  color: $body-color;
5   }
6 </style>

      樣式依然生效。

      說明：這個只是最簡單的例子，並且是與vue結合，若是你須要單獨編譯.sass文件或者.scss文件，那麼你須要安裝Ruby， 同時可讓SASS監控某個樣式表的變更，實現樣式的熱部署。

 

參考文檔  

      http://www.ruanyifeng.com/blog/2012/06/sass.html

      https://www.w3cplus.com/sassguide/

      http://www.jianshu.com/p/67f52071657d

      https://www.cnblogs.com/walls/p/6258974.html

      http://www.jianshu.com/p/8e60048baeb7

      https://www.cnblogs.com/qqqiangqiang/p/5359986.html

      http://sass.bootcss.com/

      https://www.cnblogs.com/crazycode2/p/6535105.html

      https://zhuanlan.zhihu.com/p/25106145