我可以将变量放在手写笔的文字 css 中吗？答案

【问题标题】：Can I put variables inside literal css in stylus?我可以将变量放在手写笔的文字 css 中吗？
【发布时间】：2012-02-21 12:02:22
【问题描述】：

我在手写笔中有一个看起来像这样的功能

// 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);
    }

我必须将 Internet Explorer 渐变样式包装在文字 css 范围 @css 内，否则会导致手写笔崩溃。可能是冒号太多或什么的。在任何情况下，变量 color1 和 color2 都是在 css 范围内进行的，这会破坏样式。

有什么方法可以让 css 范围解析变量？或者有没有一种方法可以在不使用文字 css 范围的情况下在手写笔中获取过滤器样式？

【问题讨论】：

标签： css node.js stylus

【解决方案1】：

这是一种方法：

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)

【讨论】：