3

I have a function in stylus that looks like this

// Shortcut for top-down gradient background color
td_gradient(color1, color2)
    background-color (color1 + (color2 - color1) / 2)
    background -webkit-gradient(linear, 0% 0%, 0% 100%, from(color1), to(color2))
    background -webkit-linear-gradient(top, color1, color2)
    background -moz-linear-gradient(top, color1, color2)
    background -ms-linear-gradient(top, color1, color2)
    background -o-linear-gradient(top, color1, color2)
    @css
    {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=color1, endColorstr=color2);
    }

I have to wrap the Internet Explorer gradient style inside the literal css scope @css, otherwise it crashes stylus. Probably too many colons or something. In any case, the variables color1 and color2 are taken literally inside the css scope, which breaks the style.

Any way I can get the css scope to parse variables? Or is there a way I can get the filter style inside stylus without using the literal css scope?

4

1 回答 1

6

这是一种方法：

filter s('progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr=%s, EndColorstr=%s)', color1, color2))

但我敦促您查看nib，也是 TJ 的。特别是，他构建了一个 mixin，可以自动生成 png 格式的渐变图像，并将其 base64 编码到样式表中。唯一需要注意的是，您需要指定高度（或宽度，用于水平渐变），但这对于您的 td:s 应该没问题。

更新：更干净一点：

filter 'progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr=%s, EndColorstr=%s)' % (color1 color2)
于 2012-02-21T12:28:50.810 回答