18Using Mixins for Cross-Browser Compatibility

We all love to use new and cutting-edge features in our style sheets. It’s what keeps our websites looking slick! However, this often causes a headache, especially in CSS, due to cross-browser compatibility.

The main browsers (such as Internet Explorer, Firefox, and WebKit) implement some CSS rules differently. This means that you have to use those weird-looking CSS prefixes to make your styles work in all those places.

Using a Sass mixin is a perfect way to not have to write out those prefixes all the time. In the first example, there’s an appearance mixin. It takes the value you need, and then you use that value in all the prefixed rules you need. Using the mixin is simple—just pass in the value ...

Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.