Search code examples
csssasscompass-sassblueprint-css

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

When I compile the sass, i get this error for the lines beginning with -filter and -ms-filter:

SASS::SyntaxError: Expected rparen token, was single_eq token

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')"

Solution

  • 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
    

    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