使用属性 mixin 的内联样式宽度

Question

我正在尝试按照link 中提供的答案使用 Jade mixins 进行内联样式设置，但它并没有按照预期的方式工作。

我在用这个玉：

mixin centerImg(margin,imgWidth,imgWidthpx,imgId)
table(border="0", cellpadding="0", cellspacing="0", width="640")
    tr
        td(width=margin)
        td(width=imgWidth)
            a.antiHand(href='#', style='cursor: none !important; pointer-events: none; border-style: none; border: none; border-color: transparent;')
                img(alt="", style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0")(width=imgWidth)(src=imgId)
        td(width=margin)

+centerImg(200,240,"240px",'https://media.giphy.com/media/SzzNGHZWHCBqw/giphy.gif')

这就是我得到的：

<table border="0" cellpadding="0" cellspacing="0" width="640">
          <tr>
            <td width="200"></td>
            <td width="240"><a class="antiHand" href="#" style="cursor: none !important; pointer-events: none; border-style: none; border: none; border-color: transparent;"><img alt="" style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0" width="240" src="https://media.giphy.com/media/SzzNGHZWHCBqw/giphy.gif"/></a></td>
            <td width="200"></td>
          </tr>
        </table>

有什么想法吗？

Answer 1

这段代码：

style="width:#{imgWidth};max-width:#{imgWidthpx};display:block;margin:0"

应该这样改变：

style=`width:${imgWidth};max-width:${imgWidthpx};display:block;margin:0`

我认为这行得通！