用翡翠编写动态CSS

前端之家收集整理的这篇文章主要介绍了用翡翠编写动态CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图用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

如果我删除样式标签,它会很好的.有没有办法在样式块中使用迭代?

@H_404_10@

解决方法

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

不幸的是,我不知道有没有一个很好的方式来做这个在玉.你可能只需要在JS中提前定义所有的CSS,然后像这样插入:

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

然而,在这一点上,将样式移动到为每个用户生成的外部样式表可能会更简单,然后使用一些合理的缓存头服务.这将避免尝试使Jade做动态CSS并加快后续页面加载为您的用户的困难.

@H_404_10@ @H_404_10@

猜你在找的CSS相关文章