Read more

Useful collection of Sass mixins

Arne Hartherz
November 19, 2010Software engineer at makandra GmbH

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.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

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.

Posted by Arne Hartherz to makandra dev (2010-11-19 10:27)