Useful collection of Sass mixins

Posted Over 13 years ago. 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.

_mixins.sass
Arne Hartherz
makandra.com
Say thanks
Last edit
Over 9 years ago
Dominik Schöler
Attachments
_mixins.sass
Keywords
ultimate, css, internet, explorer, firefox, opera, webkit
License
Source code in this card is licensed under the MIT License.

Related cards:

Limitations you should be aware of when Internet Explorer 9 parses CSS files

Internet Explorer until version 9 has some limitations when parsing CSS files

Summarized, these are:

  • Up to 31 CSS files or tags per page.
  • Up to 4095 selectors per CSS file.
  • Up to 3 nest...

CSS3 Pie: Element not properly redrawn

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

<ul>
  <li class="active"><div class="content">Act...

A collection of useful design resources for developers

This collection contains some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials.

Tutorials

Sass: get rid of deprecation warnings in dependencies

TLDR: sass >= 1.35.0 has the option quietDeps to silence deprecation warnings from dependencies.

quietDeps: If true, the compiler must not print deprecation warnings
for stylesheets that are transitively loaded through an import pat...

When does support end for a version of Internet Explorer?

The maximum version of Internet Explorer you can have depends on your version of Windows. E.g. Windows 7 users can use Internet Explorer up to version 11, but they cannot upgrade to Edge.

Since early 2016, Microsoft [only supports the latest vers...

Internet Explorer will download CSS files twice, if referenced via scheme-less URLs

You can use scheme-less URLs (or protocol-relative URLs) to have browsers use the current protocol (HTTP or HTTPS) when loading content referenced with such an URL.

A protocol relative URL doesn...

CSS Differences in Internet Explorer 6, 7 and 8 « Smashing Magazine

If I ruled the world, IE would not be used by people. Since that is not the case, we need to put these rules to memory.

How to test your website for different versions of Internet Explorer or Edge

Virtualization

Microsoft provides virtual machines for different Internet Explorer versions.

The images are available for various virtualization solutions, includi...

Different CSS for IE using Sass

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your curr...

Minimal JavaScript function to detect version of Internet Explorer or Edge

If possible your code should detect features, not browsers. But sometimes you just need to sniff the browser. And when you do, you're proba...

Posted by Arne Hartherz to makandra dev (2010-11-19 09:27)
This website uses short-lived cookies to improve usability.
or learn more