在 Jade 模板中编写内联 CSS 样式时如何使用 javascript 变量答案

【问题标题】：How do you use javascript variables when writing inline CSS styles in a Jade template在 Jade 模板中编写内联 CSS 样式时如何使用 javascript 变量
【发布时间】：2012-02-07 13:03:31
【问题描述】：

我正在尝试动态插入 CSS 的 sn-ps。理想情况下，这会起作用：

style(type='text/css')
    #header a#logo { background:url(constants.logo) no-repeat; }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
        #header a#logo { background-image: url(constants.logo_2x); }
    }

不幸的是，constants.logo 是 /literally/ 放置在 DOM 中的。以下是什么起作用：

!= "<style type='text/css'>"
!= "#header a#logo { background:url('"+constants.logo+"') no-repeat; }"
!= "@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {"
!= "    #header a#logo { background-image: url('"+constants.logo_2x+"'); }"
!= "}</style>"

有没有更好的办法？

【问题讨论】：

标签： css node.js pug

【解决方案1】：

使用#{variable} 打印元素文本中的变量。

【讨论】：