IE特定过滤器(如-ms-filter)的Sass Mixin错误 [英] Sass Mixin Error for IE specific filters like -ms-filter
问题描述
我正在尝试像这样制作按钮混合:
I'm trying to make a button mixin like this:
=default_button(!lighter, !darker)
:border= 1px !lighter solid
:background-color #e3e3e3
:background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, #d0581e
:background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 #d0581e
:filter= progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker')
:-ms-filter= "progid:DXImageTransform.Microsoft.gradient(startColorstr='!lighter', endColorstr='!darker')"
:zoom 1
:margin 0 0 0 0
:width auto
:padding 2px 14px 2px 14px
:border-radius 10px
:-webkit-border-radius 10px
:-moz-border-radius 10px
:color #FFF
当我编译sass时,对于以-filter和-ms-filter开头的行,我会收到此错误:
When I compile the sass, i get this error for the lines beginning with -filter and -ms-filter:
SASS :: SyntaxError:预期的rparen令牌为single_eq令牌
SASS::SyntaxError: Expected rparen token, was single_eq token
我很确定这是=的位置,但是我不确定如何正确编写它.如果我传递的是十六进制值而不是!lighter,!darker,它将起作用,因为这样我就可以像这样删除=符号:
I'm pretty sure it's my placement of the ='s, but I'm not exactly sure how to write it correctly. It works if I pass the hex values instead of !lighter, !darker, because then I can remove the = sign like so:
:filter progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')
:-ms-filter "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')"
推荐答案
已解决了此问题,但仍在寻找最佳方法的替代建议...
Solved it like this, but still looking for alternative suggestions on the best way...
=default_button(!lighter, !darker)
text-shadow= 1px 1px 3px darken(!darker, 8)
border= 1px !darker solid
background-color= !lighter
background= -webkit-gradient(linear, 0 0, 0 100%, from(!lighter), to(!darker)) repeat-x, !darker
background= -moz-linear-gradient(90deg, !darker, !lighter) repeat-x scroll 0 0 !darker
-ms-filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{!lighter}', endColorstr='#{!darker}')"
:zoom 1
:margin 0 0 0 0
:width auto
自最初发布此答案以来,Sass的语法已更改.现代的sass(缩进)语法如下所示:
The syntax for Sass has changed since this answer was originally posted. The modern sass (indented) syntax looks like this:
=default_button($lighter, $darker)
text-shadow: 1px 1px 3px darken($darker, 8)
border: 1px $darker solid
background-color: $lighter
background: -webkit-gradient(linear, 0 0, 0 100%, from($lighter), to($darker)) repeat-x, $darker
background: -moz-linear-gradient(90deg, $darker, $lighter) repeat-x scroll 0 0 $darker
-ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$lighter}', endColorstr='#{$darker}')")
zoom: 1
margin: 0 0 0 0
width: auto
这篇关于IE特定过滤器(如-ms-filter)的Sass Mixin错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!