2012年10月8日 星期一

[教學] 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 檔案。

nib

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

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 月開始,錯過了今年,就要等到明年,快點加入吧!

沒有留言:

張貼留言

Facebook