css - 使用 Jade 编写动态 CSS

Question

我正在尝试使用 Jade 编写一些动态 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

如果我删除样式标签，它会呈现良好。有没有办法在样式 block 中使用迭代？

Answer 1

因为 style 标签只允许 Jade 中的文本，它会将您的 colors 中的每个元素 视为纯文本。然后它遇到 #{item.class} 并尝试解析它，但它失败了，因为它没有在上一行定义 item。

很遗憾，我不确定 Jade 是否有很好的方法来做到这一点。您可能只需要提前在 JS 中定义所有 css，然后像这样插入它:

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

不过，在这一点上，将样式移动到为每个用户生成的外部样式表中，然后使用一些合理的缓存 header 提供它可能会更简单。这将避免尝试让 Jade 执行动态 CSS 并为您的用户加快后续页面加载的困难。