用Jade编写dynamicCSS

我正在尝试使用Jade写出一些dynamicCSS，如下所示：

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标签只允许Jade中的文本，所以它将each item in colors视为纯文本。 然后它遇到#{item.class}并试图parsing，但它失败，因为它没有定义在前一行的项目。

不幸的是，我不确定是否有一个很好的方法来做到这一点在翡翠。 您可能只需提前在JS中定义所有的CSS，然后像这样插入它：

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

不过，在这种情况下，将样式移动到为每个用户生成的外部样式表可能会更简单，然后使用一些合理的caching标头来提供样式表。 这将避免尝试使JadedynamicCSS和加快后续页面加载为您的用户的困难。

Answer 2

你可以使用手写笔。 它是由创造翡翠的同一个人创造的，在理性上与翡翠几乎相同。

Answer 3

另一种方法是导入自己的CSS样式表。 在Jade文档中 ，您可以看到您可以使用此类代码包含样式表：

 html head style include style.css 

然后，您可以在可以引用的单独文件中定义任何CSS。

Answer 4

我碰到类似的问题，我想根据路由添加一个特定的类到body标签，类似于我在PHP中所做的。 最后，我用玉的模板inheritance来达到类似的效果。