用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 

如果我删除样式标签,它呈现罚款。 有什么方法可以在样式块中使用迭代?

       

网上收集的解决方案 "用Jade编写dynamicCSS"

由于style标签只允许Jade中的文本,所以它将each item in colors视为纯文本。 然后它遇到#{item.class}并试图parsing,但它失败,因为它没有定义在前一行的项目。

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

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

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

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

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

 html head style include style.css 

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

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