我的手写笔有一个类似这样的功能
// 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 范围的情况下获取手写笔内的过滤器样式?
最佳答案
这是一种方法:
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)
关于css - 我可以在 stylus 中将变量放入文字 css 中吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9377267/