5

小さなノード アプリを作成し、Express と Jade および Stylus を使用して、いくつかの基本的な HTMl ページをレンダリングしています。

Nodeから生成された.stylファイルにいくつかの変数を渡す方法があるかどうか興味がありましたか? .styl ファイル内で変数を定義できることはよく知っていますが、より動的にする必要があります。具体的には、いくつかの色をデータベースに保存し、ノードにそれらの値を取得させ、それらを .styl ファイルに挿入して、ページがレンダリングされるときにこれらの変数が渡されるようにする簡単な方法を探していました。 -できますが、詳細が不足しています。どんな助けでも大歓迎です。ありがとう！

4

2 に答える 2

6

Stylus APIのdefine（）関数を使用して、Stylus変数を設定し、JS関数を使用できるようにすることができます。

于 2012-09-25T01:15:42.553 に答える
6

彼のアドバイスは私が最終的に実装したものに近かったので、@ebohlmanに感謝します。

基本的に、私は Connect Middleware の上でこれを行う方法を見つけようとしていましたが、ここに私が思いついたものがあります:

app.configure を実行するとき、次のようにカスタム コンパイル コンパイル関数 (キー 'compile') を使用しました。

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 関数の三項演算子により、簡単なデフォルトとオーバーライドが可能になります。例に基づいてAPIを理解するのに少し時間がかかりましたが、これは他の人が方法を知りたいと思う解決策になる可能性があるようです. 誰かがこのアプローチの欠点を持っている場合は、私に知らせてください。

于 2012-09-25T17:38:46.517 に答える