Sass Mixin Error for IE specific filters like -ms-filter

Question

I\'m trying to make a button mixin like this:

=default_button(!lighter, !darker) 
  :border= 1px !lighter solid
  :background-color #e3e3e3
  :background= -w         


        

Answer 1

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

Answer 2

Update your syntax to use : instead of = for the property definitions:

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

Answer 3

Interpolation #{} doesn't work sometimes because it shortens hex color values. For example, it will shorten #334455 to #345, which breaks the filter syntax.

SASS has a new function in version 3.2: ie-hex-str().

Here is how I got it to work:

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

• SASS Changelog
• SASS Functions