Can I put variables inside literal css in stylus?

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?

Problem courtesy of: Hubro

Solution

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)

Solution courtesy of: Linus Gustav Larsson Thiel

Node.js Recipes责编内容来自:Node.js Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Can I put variables inside literal css in stylus?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录