Posted over 8 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.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
about 4 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 cookies to improve usability and analyze traffic.
Accept or learn more