[教學] stylus & nib express on node.js

stylus & nib express on node.js

CSS 架構上也許有點難寫，難看，stylus 就是用來簡化 CSS 的架構，stylus 可以讓 css 自定變數，自定 mixin ，nib 就可以視為將 stylus 強化的 framework.

stylus

stylus 是一套以 sass 為標準的 node.js module，讓開發者可以在 node.js 上面直接編寫 sass，即時編譯成 css 檔案。

• website
• github

nib

nib 是集合 stylus 常用的 mixin 為大全的 sass framework，例如在樣式中經常用的 Border radius, Clearfix, Gradients 等，已經收錄在裡面，當然自己也可以建立自己的 mixin，讓開發 css 變得更為簡單。

• website
• github

express 整合

express，用於建構 node.js web service 的模組，網路上已有許多說明，express 路徑相關處理可以參考文章，基本需要使用的 static file 路徑設定。

app.configure(function(){
  app.use(express['static'](__dirname + '/public'));
});

增加 stylus 以及 nib



var stylus = require("stylus"), 
    nib = require("nib");

stylus 我們只需要在開發環境裡面使用即可，因此設定如下，

app.configure('development', function(){
  var stylusMiddleware = stylus.middleware({
  src: __dirname + '/stylus/', // .styl files are located in `/stylus`
  dest: __dirname + '/public/', // .styl resources are compiled `/css/*.css`
  debug: true,
  compile: function(str, path) { // optional, but recommended
    return stylus(str)
      .set('filename', path)
      .set('warn', true)
      .set('compress', true)
      .use(nib());
    }
  });
  app.use(stylusMiddleware);  
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
});

後記

stylus + nib 在 node.js 環境底下是個開發 css 優秀的選擇，當然你也可以安裝 compass 來處理同樣的問題，不過既然都使用 Node.js ，而且已經有既有的模組可以使用，個人會參考讓環境單純化。

Node.js Taiwan 社群裡面，攥寫基本的開發手冊，Node.js 台灣社群協作電子書，需要更多人的投入，如果有中文相關資料願意投入，歡迎與我聯繫。

Node.JS Knockout 一年一度的黑客頌活動，即將於 11 月開始，錯過了今年，就要等到明年，快點加入吧！