Sass混合错误：针对IE特定滤镜例如-ms-filter

Question

我正在尝试创建一个类似于这样的按钮混合器：

=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开头的行，我遇到了以下错误：

SASS::SyntaxError：预期的右括号令牌，实际上是单个等于令牌

我非常确定问题出在我的=符号位置，但不知道怎样写才是正确的。如果我传递十六进制值而不是!lighter、!darker，那么它可以正常工作，因为我可以删除=符号，就像这样：

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

- kinet

Answer 1

我是这样解决的，但仍在寻找其他建议来寻找最佳方法...

=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) 
  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

- kinet

---

支持使用#{...}语法。这一语法在SASS 3.1.10中非常必要，以便于SASS可以替换MS梯度过滤器的startColorstr/endColorstr参数中的变量。也就是说，startColorstr=$foo不能正常工作（无法替换$foo），但是startColorstr=#{$foo}却可以。 - voetsjoeba

谢谢。在这之前，我的渐变是从蓝色到黑色（即IE的默认值）。再次感谢。 - Orlando

如果你的颜色具有alpha透明度（rgba），那么这种方法将不起作用。您需要使用下面Matthias Dailey的答案。 - cimmanon

Answer 2

更新您的语法，使用:而不是=来定义属性：

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

查看SASS参考文档，尽管示例是使用SCSS而不是SASS缩进样式。完整的SASS文档索引。

- Beau Smith