Hacking IE6 With Sass Mixins

Just recently I was raging against Internet Explorer 6 and the hacks that are required to overcome its shitty css support when it occurred to me that Sass mixins could be used to abstract away some of these hacks.

Read this raving if you use sass and rage against having to support IE6.

Bill Gates is way more awesome than Hampton Catlin (at sucking)

Good morning class, let us begin today's lesson with some quotes.

Now, I ain't gay, but let it be known that Sass is so fucking awesome that I'd definitely suck Hampton Catlin's cock. For free!

Scrooloose - 12th Dec, 2009

Many of you may be offended by the above homo-erotic sentiments and view them as inappropriate, but let me ask you: if you call those sentiments "inappropriate" then what, pray tell, the fuck would you call these:

I love Bill Gates like I love decapitated parrot heads sprinkled on cornflakes with milk and sugar. If I met him on the street I'd kidnap him and drag him back to my secret torture lab, where I would inject a delightful cocktail of fire ants, piranhas, and ninja stars into his anus. Then, I'd don my strap-on cactus and proceed to stir said cocktail with extreme force. Following this, I would feed him — cock first — to the cult of homosexual-rapist-cannibals that I harbor in my basement.

Whoa! Hold on there, thats pretty brutal! Maybe I took that last part a bit too far?? OH WAIT NO I DIDN'T, FUCK YOU BILL!

Queen Elizabeth II (after failing to get her site running in IE)

I hold Bill personally responsible for the travesty of Internet Explorer 6. Not the browser itself mind you, but the fact that it is still widely used today, even though I was still in fucking high school when it was released!*

Having to support such a buggy and incomplete css implementation is enough to make any web developer shit his pants in protest.

Sass mixins to the rescue

I only looked into these the other day, and I wish I'd done it ages ago. Mixins are basically a way to reuse chunks of css.

Check out this example:


Here we create a mixin called "ultimate-hippy-border" which takes a "thickness" parameter. When the css file is compiled, the declarations inside the mixin are evaluated and inlined into the css rules that the mixin is used in.

Check out these links for more info about mixins.

You can see how we could use this to hide css hacks. Check out these examples:



There are several benefits to doing this.

The most obvious is that we no longer have these ugly-as-fuck hacks repeated all over our code. Instead, we are left with much more symbolic mixin code. The intent of +min_height_hack(10px) is much clearer than the 3 line hack we would otherwise inline. This makes things more concise, readable and DRY, which results in some erection-inducing maintainability.

I can haz a repo on github?

I've created a repo on github with the hacks that ive been using so far which, at the time of this writing, is nothing more that what's in the gist above. Not impressed? Here, check out this ballsack:

How you like me now?

If you're still not satisfied, then you'll have to fork me and add your own hacks.


* if you are one of the people that still uses IE6 and you are not clinically dead then please correct this situation immediately. Thank you.