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

如果删除样式标记，它会呈现正常。有没有办法在样式块中使用迭代？

Answer 1

由于style标记仅允许Jade中的文字，因此它会将您的each item in colors视为纯文本。然后它遇到#{item.class}并尝试解析它，但它失败了，因为它没有在前一行定义item。

不幸的是，我不确定在Jade中有这么好的方法。你可能只需要在JS中提前定义所有的css，然后像这样插入它：

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

此时，将样式移动到为每个用户生成的外部样式表，然后使用一些合理的缓存头提供它可能更简单。这样可以避免尝试使Jade做动态CSS并加快用户后续页面加载的困难。

Answer 2

你可以使用手写笔。它是由创造Jade的同一个人制作的，并且在合理范围内几乎与Jade相同。

Answer 3

另一种方法是导入自己的css样式表。在Jade doc中，您可以看到可以包含带有此类代码的样式表：

pixels[x + y * SIZE] = sheet.pixels[(x + this.x) + (y + this.y) *   
sheet.SIZE];

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

Answer 4

我遇到了一个类似的问题，我想根据路由向body标签添加一个特定的类，类似于我在PHP中所做的。最后，我使用了jade的模板继承来实现类似的结果。

用Jade编写动态CSS

4 个答案: