Request More Information

We are hiring!

Xtivia, Inc.
2013 North America Liferay Partner of the Year

Join our top-notch team of Enterprise Java and Liferay Portal professionals in our Austin, TX office or work remotely! Please check out our current Dice listings.

Recent Bloggers

Bob Dietrich
Posts: 8
Stars: 0
Date: 12/18/14
Tony Salerno
Posts: 2
Stars: 0
Date: 12/18/14
Chetan Chadalavada
Posts: 3
Stars: 0
Date: 12/17/14
Chris Provolt
Posts: 3
Stars: 0
Date: 12/16/14
Kat Meadows
Posts: 7
Stars: 0
Date: 12/16/14
Godwin Anasigre
Posts: 1
Stars: 0
Date: 12/12/14
Sonu Verghese
Posts: 9
Stars: 0
Date: 12/12/14
Nick Ortman
Posts: 2
Stars: 0
Date: 12/12/14
Chris Shaw
Posts: 9
Stars: 0
Date: 12/9/14
Kaushik Nagaraj
Posts: 9
Stars: 0
Date: 12/9/14
« Back

Making SASS Linear Gradient Mixins Behave in IE

A very large gift given to us user interface developers in Liferay 6.1 is the inclusion of SASS support. One of the many ways SASS comes in handy is handling prefixed CSS rules – instead of having to specify each rule every time you, say, want to declare a gradient, you can just write one mixin and have SASS do the heavy lifting. Here's a farirly straightforward linear gradient mixin I wrote recently:

@mixin gradient($from-color, $to-color) {
    background-color: mix($from-color, $to-color); /* Fallback */
    background-image: -webkit-gradient
      (linear, 0% 0%, 0% 100%, from($from-color), to($to-color));
    background-image: -webkit-linear-gradient
      (top, $from-color, $to-color); 
    background-image:    -moz-linear-gradient
      (top, $from-color, $to-color);
    background-image:     -ms-linear-gradient
      (top, $from-color, $to-color);
    background-image:      -o-linear-gradient
      (top, $from-color, $to-color);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='$from-color', EndColorStr='$to-color')";
}

At first blush, this should work, right? However, and in retrospect I shouldn't have been surprised by this at all, it was doing some seriously weird stuff in IE. I checked the compiled CSS; and SASS skipped parsing the variables in the -ms-filter attribute, passing the variable names through like nothing ever happened. (Apparently if -ms-filter doesn't get starting and ending colour values it understands, it picks blue and black. And now you know.)

I poked around some and came across this blog post from Josh Rubinstein, who was having the same problem. It turns out that -ms-filter, being a proprietary extension, doesn't get recognised by SASS – when it comes along, SASS just throws its virtual hands up and passes the name of the variable.

So what to do about it then? SASS's interpolation syntax to the rescue! What you need to do is wrap your variables like so: #{$from-color}. That way, SASS will parse your colour values, and all our browsers will live happily ever after. Here's the fully-functional mixin:

@mixin gradient($from-color, $to-color) {
    background-color: mix($from-color, $to-color); /* Fallback */
    background-image: -webkit-gradient
      (linear, 0% 0%, 0% 100%, from($from-color), to($to-color));
    background-image: -webkit-linear-gradient
      (top, $from-color, $to-color); 
    background-image:    -moz-linear-gradient
      (top, $from-color, $to-color);
    background-image:     -ms-linear-gradient
      (top, $from-color, $to-color);
    background-image:      -o-linear-gradient
      (top, $from-color, $to-color);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#{$from-color}', EndColorStr='#{$to-color}')";
}

Share and enjoy!

Comments
Trackback URL:

Join the discussion! Speak your mind! Be the first.

Request More Information