使用Jade编写动态CSS

问题描述

我想用Jade写出一些动态的CSS，如下：

I'm trying to write out some dynamic CSS using Jade, like so:

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

但是，这会产生以下错误：

However this gives the following error:

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

如果我删除样式标签，它呈现精致。是否有任何方法在样式块中使用迭代？

If I remove the style tag, it renders fine. Is there any way to use iteration within a style block?

推荐答案

因为 style 标签只允许在Jade中的文本，它将中的每个项目以颜色视为纯文本。然后它遇到＃{item.class} 并尝试解析它，但它失败，因为它没有定义 item 上一行。

Because style tags only allow text in Jade, it's treating your each item in colors as plain text. Then it encounters the #{item.class} and attempts to parse that, but it fails because it didn't define item on the previous line.

不幸的是，我不确定有没有一个很好的方法来做到这一点。你可能需要提前在JS中定义所有的css，然后插入它：

Unfortunately, I'm not sure that there is a good way to do this in Jade. You might just have to define all of your css ahead of time in JS and then insert it like so:

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

更简单的方法是将样式移动到为每个用户生成的外部样式表，然后使用一些合理的缓存头来提供。这将避免尝试让Jade做动态CSS并加快用户后续页面加载的难度。

At that point though, it might be simpler to just move the styles to an external stylesheet that gets generated for each user and then serve it with some reasonable caching headers. That would avoid the difficulties with trying to make Jade do dynamic CSS and speed up subsequent page loads for your users.

这篇关于使用Jade编写动态CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！