は、私はそうのような、ジェイドを使用して、いくつかの動的なCSSを書き出すしようとしているジェイド

Question

とのダイナミックなCSSの書き方：

style(type='text/css') 
    each item in colors 
     .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; } 

しかし、これは次のエラーを与える：

ReferenceError: media='print') 
    7| style(type='text/css') 
    > 8|  - for(var item in colors) 
    9|   .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; } 
    10| block Content 
    11|  include scheduleTemplate 

item is not defined 

私はスタイルを削除した場合タグ、それはうまくレンダリングします。スタイルブロック内で反復を使用する方法はありますか？

Answer 1

styleタグは翡翠でのみテキストを許可するため、each item in colorsをプレーンテキストとして扱います。次に、#{item.class}が見つかり、それを解析しようとしますが、前の行にitemが定義されていないため失敗します。

残念ながら、私は玉の中でこれを行うには良い方法があるとは確信していません。あなただけのJSに事前にあなたのCSSのすべてを定義し、そのようにそれを挿入する必要があります：

style(type='text/css') 
    #{predefined_css} 

その時点で、しかし、それだけで生成されます外部スタイルシートにスタイルを移動する方が簡単かもしれませんいくつかの合理的なキャッシュヘッダーでそれを提供します。それはJadeに動的なCSSをさせて、その後のページの読み込みをユーザーにスピードアップさせようとすることによる困難を避けるでしょう。

Answer 2

スタイラスを使用できます。それは翡翠を作ったのと同じ人々によって作られており、理由のなかで翡翠とほとんど同じです。

Answer 3

PHPで行ったのと同様に、ルートに応じてbodyタグに特定のクラスを追加したいという同様の問題が発生しました。結局、jadeのテンプレート継承を使って同様の結果を得ました。

Answer 4

別の方法は、独自のcssスタイルシートをインポートすることです。 Jade docでは、あなたは、このようなコードを使用してスタイルシートを含むことができることが確認できます。

html 
    head 
    style 
     include style.css 

次に、あなたが参照できる別のファイルに任意のCSSを定義することができます。