IE特定过滤器（例如-ms-filter）的Sass Mixin错误

StafanTony2020-03-24

我正在尝试使按钮混合如下：

=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：预期的rparen令牌，为single_eq令牌

我很确定这是=的位置，但是我不确定如何正确编写它。如果我传递十六进制值而不是！lighter，！darker，它将起作用，因为这样我就可以删除=符号，如下所示：

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

Gil伽罗小宇宙2020/03/24 17:13:31

更新语法以:代替=属性定义使用：

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

Check out the SASS Reference, though the examples are in SCSS rather than SASS indented style. Full index of the SASS documentation.

达蒙2020/03/24 17:13:31

插值#{}有时不起作用，因为它会缩短十六进制颜色值。例如，它将缩短#334455为#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 */

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer