我可以在 stylus 中将变量放入文字 css 中吗？
我在手写笔中有一个看起来像这样的函数，
// 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 范围的情况下获取手写笔内的过滤器样式？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是一种方法：
但我强烈建议您查看同样由 TJ 开发的 nib。特别是，他构建了一个 mixin，可以自动生成 png 格式的渐变图像，并将其进行 base64 编码到样式表中。唯一需要注意的是，您需要指定高度（或宽度，用于水平渐变），但这对于您的 td:s 来说应该没问题。
更新：更干净一点：
Here is one way:
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: