Hub*_*bro 3 css stylus node.js
我在手写笔中有一个看起来像这样的功能
// 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);
}
Run Code Online (Sandbox Code Playgroud)
我必须在文字css范围内包装Internet Explorer渐变样式@css,否则会崩溃手写笔.可能是太多冒号或其他东西.在任何情况下,变量color1和color2字面意思都在css范围内,这打破了风格.
我能以任何方式获得css范围来解析变量吗?或者有没有办法在不使用文字css范围的情况下在手写笔中获得滤镜样式?
这是一种方式:
filter s('progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr=%s, EndColorstr=%s)', color1, color2))
Run Code Online (Sandbox Code Playgroud)
但我恳请你查看笔尖,也是TJ.特别是,他构建了一个mixin,可以在png中自动生成渐变图像,并将base64编码到样式表中.唯一需要注意的是,您需要指定高度(或宽度,水平渐变),但对于您的td:s应该没问题.
更新:有点清洁:
filter 'progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr=%s, EndColorstr=%s)' % (color1 color2)
Run Code Online (Sandbox Code Playgroud)