Css IE特定筛选器（如-ms筛选器）的Sass混合错误

我试着做一个按钮混音像这样：

=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

=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

在编译sass时，以-filter和-ms filter开头的行出现以下错误：

SASS:：SyntaxerError:应为rparen令牌，为单\u eq令牌

我很确定这是我的class='s的位置，但我不确定如何正确地写它。如果我传递十六进制值而不是！打火机！更暗，因为这样我可以删除=符号，如下所示：

:filter progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')
:-ms-filter "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F89F16', endColorstr='#d0581e')"

---

像这样解决了，但仍在寻找最佳方式的替代建议

=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（缩进）语法如下所示：

=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

=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

---

更新语法以使用

：

而不是

=

进行属性定义：

=mixin($variable) 
  property: value
  property: $variable

尽管示例在SCS中而不是在中，但请查看。满。

插值

{}

有时不起作用，因为它缩短了十六进制颜色值。例如，它将

#33445

缩短为

#345

，这会破坏过滤器语法

SASS在3.2版中有一个新功能：

ie-hex-str（）

以下是我如何让它工作的：

filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")
+ ie-hex-str($start)
+ unquote("', endColorstr='")
+ ie-hex-str($stop)
+ unquote("',GradientType=0)"); /* IE6-9 */

---

投票支持{…}语法。SASS 3.1.10上MS渐变过滤器的startColorstr/endColorstr参数需要SASS替换变量。也就是说，startColorstr=$foo不起作用（因为它不能代替$foo），但是startColorstr={$foo}起作用了。谢谢。。在这之前，我的渐变是从蓝色到黑色（即默认值）。。再次感谢如果您的颜色具有alpha透明度（rgba），则此方法将不起作用。您将需要使用下面的。这仍然是真的吗？我刚刚在mixin上测试了插值，它似乎没有缩短我的十六进制颜色值。Kyle，idk，你使用的是哪个版本的SASS？我使用的是3.3.7（当前版本）