在 Hexo 部落格使用 SASS

嘗試在 Hexo 部落格使用 SASS，不難，這裡記錄一下過程

安裝與設定

安裝 hexo-renderer-sass

npm install --save hexo-renderer-sass

在 Hexo 專案的主要 _config.yml 檔或主題的 _config.yml 檔裡加上：

node_sass:
  includePaths:
    - node_modules
  outputStyle:
    compressed

建立 SASS 檔（.scss）

進入 source/css/ 資料夾備份舊的 CSS 檔案，新建一個 style.scss 檔。
我自已的 CSS 其實很簡單，單純只是想瞭解一下 SASS 的基本語法，像是：

• 變數（variable)：

  $font-family-serif: "Palatino Linotype", "Source Han Serif", PMingLiU, serif;

• 多層（nesting）:

  .tags > a STYLE &::before STYLE

• 延展/繼承（extend/inheritance）：

  %code-and-block code @extend %code-and-block STYLE

  像是混入（mixin）、模組（module）或是運算（operator）都沒有用到。

Hexo generate

如同往常執行 hexo g，Hexo 就會自動生成 CSS 檔案了。

SASS 一般環境使用

SASS 現在也有 NPM 的包，只要 npm install -g sass 就可以安裝在 Node 的環境下使用了。
轉換 .scss 或 .sass 檔案也很簡單，就是 sass INPUT.sass OUTPUT.css 就可以了，然後如果要自動監控 sass 檔在指令裡加 –watch 的選項就可以了。

• CSS
• Hexo
• SASS