2012-09-24 5 views
5

私は小さなノードアプリケーションを構築しており、Expressを使ってJadeとStylusで基本的なHTMlページを描画しています。ノードのアプリケーション変数がスタイラスファイルに渡される

ノードから生成された.stylファイルにいくつかの変数を渡す方法があるのか​​不思議でしたか?私は.stylファイルの中に変数を定義することはできますが、もっと動的にする必要があることはよく知っています。具体的には、dbにいくつかの色を保存する簡単な方法を探していました。ノードにこれらの値を取得させ、それらを.stylファイルに挿入して、ページがレンダリングされるときにこれらの変数が渡されるようにしました。 - 可能だが、私は細部に欠けている。どんな助けもありがとうございます。ありがとう!

答えて

6

Stylus APIのdefine()関数を使用して、スタイラス変数を設定し、JS関数を使用できるようにすることができます。

6

彼の助言は私が最終的に実装したものに近いので、@ebohlmanに感謝します。

基本的に私は接続ミドルウェアの上にこれを行う方法を把握しようとここにいたが、私が思いついたものです:app.configureを行うとき

私はカスタムコンパイルコンパイル機能(キー「コンパイルを使用しました「)そのような:

app.use(require('stylus') 
    .middleware({ 
    src: app.root + '/app/public', 
    compile: compile 
    }) 
); 

それから私は、関数のカップルを作成しました:

var stylus = require('stylus'); 
var mylib = function(style){ 
    style.define('themeColor1', function(){ 
    //call to the db that returns a color 
    color = 'blue'; 
    color = color ? color : 'orange'; 
    return new stylus.nodes.Literal(color); 
    }); 
}; 

var compile = function(str, path) {  
    return stylus(str) 
    .use(mylib); 
}; 

その後、私は.stylファイルの内部で:

background-color themeColor1(); 

themeColor1関数の3項演算子は、簡単なデフォルトとオーバーライドを可能にします。例に基づいてAPIを理解するのに少し時間がかかりましたが、他者がやりたいことを知りたいと思う解決策になるようです。誰かがこのアプローチの落とし穴があるなら私に知らせてください。

+0

リテラルが最適なようです。 –

+2

関数を作成せずにノードからスタイラスに変数を渡す方法を知っていますか?私はここで答えを見た.define()しかしそれは私にとってはうまくいくようだ。 – qodeninja

+0

'Literal'が期待通りに動作しないことがわかりました。私は' Ident'を使用しなければなりませんでした –

関連する問題