Can I put variables inside literal css in stylus?

Question

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?

Answer 1

Here is one way:

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

But I urge you to check out nib, also by TJ. In particular, he's built a mixin that auto-generates a gradient image in png, and base64-encodes it into the stylesheet. The only caveat is that you need to specify height (or width, for horizontal gradients), but that should be fine for your td:s.

UPDATE: A little cleaner:

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