css – Sass Mixin IE特定过滤器的错误,如-ms过滤器

我正在尝试像这样一个按钮mixin:
=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: Expected rparen token,was single_eq token

我很确定这是我的位置,但我不完全确定如何正确写入。如果我传递十六进制值而不是!更轻,更暗,因为我可以像这样删除=符号:

: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,!darker
  background= -moz-linear-gradient(90deg,!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,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

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型 ...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...