Useful collection of Sass mixins

Updated . Posted . Visible to the public.

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
Last edit
Dominik Schöler
Attachments
Keywords
ultimate, css, internet, explorer, firefox, opera, webkit
License
Source code in this card is licensed under the MIT License.
Posted by Arne Hartherz to makandra dev (2010-11-19 09:27)