Useful collection of Sass mixins

This collection of Sass Show archive.org snapshot mixins enables cross-browser styling (including IE with CSS3PIE Show archive.org snapshot ) with less lines of code.

This enables PIE for IE up to version 8 only (the first part is not possible in Haml, so use ERB):

<!--[if !IE]><!-->
  <%= stylesheet_link_tag 'screen', :media => 'screen' %>
<!--<![endif]-->
<!--[if lte IE 8]>
  <%= stylesheet_link_tag 'screen_with_pie', :media => 'screen' %>
<![endif]-->

These would be your two screen Sasses:

# screen_with_pie.sass
=pie
  behavior: url(/stylesheets/lib/PIE.htc)
  position: relative
@import base.sass

# screen.sass
=pie
  // No pie for you
@import base.sass

Finally, in your base.sass, you can @import mixins.sass from the attached file.\
Please not that it's still using the old Sass syntax (! variables instead of $) and will be updated eventually.

Arne Hartherz Over 13 years ago