Sass in NuxtJS

以前對Sass/SCSS等需要預處理的CSS Style有一定抗拒，因為需要安裝一堆應用程式，每次更新都需要處理一次，但是現在在NuxtJS中有Vue Loader處理，不論那一種需要預處理的CSS都可以輕鬆搞定。

在多種預處理的CSS中我先是賞試了Sass，不用再加任何標點符號真的很棒！

Sass

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

原本是這樣的CSS

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Sass就變成這樣子
雖然以tab層數來控制Nesting內層超方便，但是也很容易出錯。

然後我就試了Sass的改良版－SCSS

SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

比起Sass大有CSS Style原本的樣貌，Nesting的可讀性也比較高。加上對原版CSS3的完全兼容，所以改用SCSS完全沒有懸念！

在NuxtJS中使用

基本上只要簡單一點設定就可以完全改用SCSS，需要讀入整個scss file的話，只要在nuxt.config.js中載入scss，並注明lang: 'scss'即可。

module.exports = {
  ...
  css: [
    { src: '~assets/css/main.scss', lang: 'scss' }
  ]
  ...
}

在vue file中使用的話，也只要在style中加上lang='scss'即可。

<style lang="scss" scoped>
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
</style>

還有記得安裝Webpack的Sass loader，忘了安裝的話就不會預處理這些SCSS了

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

在NuxtJS中使用CSS變數

這是一個我很想使用的功能，因為以前CSS3未能對能變數，現在有SCSS就可以使用了，但是問題就出來了，如果我在不同的vue file中設定變數是不能共用的。
即是在公用的scss file中設定了變數

$font-color: #999;

在vue file中試用

color: $font-color;

還是失敗了

只好改用CSS的root來處理跨檔案的變數

:root {
  --font-color: #999;
}

然後在vue檔中也可以讀取root的變數了！

#content {
  var(--font-color);
}

追加

其實SCSS也可以跨檔案使用變數的，先在主檔案設定變數，例如setting.scss中設定

$font-color: #999;

再在分頁的vue檔的style中讀入

@import "setting.scss";

p { color: $font-color; }

不過Google並不建議使用@import來載入CSS，因為會增加CSS的傳輸時間，所以我還是會使用root變數配合SCSS使用。

只要在nuxt.config.js預先載入Global CSS

  css: [
    { src: '~assets/css/setting.scss', lang: 'scss' }
  ]

setting.scss中預設的變數都可以在所有.vue中隨便使用了。