Posted over 9 years ago. Visible to the public.

Useful collection of Sass mixins

This collection of Sass mixins enables cross-browser styling (including IE with CSS3PIE) 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):

Copy
<!--[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:

Copy
# 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.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
over 5 years ago
by Dominik Schöler
Attachments:
_mixins.sass
Keywords:
ultimate, css, internet, explorer, firefox, opera, webkit
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more