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中隨便使用了。