A Sass-y box-sizing fallback if needs must

I’ve recently had to create a dozen or so HTML templates for a client who’s sites audience has are keen fans of Internet Explorer 7 and use it regularly using the site.

With my irking toward modern front-end development and leaving the past to have a working, accessible site that might not look the same but all the content would still be there. Unfortunately on this occasion I couldn’t just give IE7 a linear single column of the site using something like Universal-IE7.

My main issue with the layout of the pages for this project is I’ve been using box-sizing: border-box; since last year. Internet Explorer 7 and some (very old gecko and webkit browsers) don’t support this fantastic bit of CSS.

So I took to Codepen (it’s pretty much my first port of call for any HTML/CSS/JS thing I do) and started fleshing out a nice simple Sass mixin to create the compiled CSS for IE8 and up and then a different set of compiled CSS for IE7 and below.

The Results

I created a small little mixin that would allow you define a left and/or right padding as well as the width of the element. It would compile and create the width and padding for modern browsers and then create a set of CSS for IE7 at the same time adding a conditional comment. Currently you can set the widths in px or with percentages. I am trying to work out how to include ems for padding with a percentage width but haven’t got around to it yet. I just wanted to get this out there.

So where is it?

It’s built in to my recently updated set of Sass mixins and files - Sassifaction.

Therein it’s also built and ready in my Mixture Project - Sassifaction Mixture.

If you just want it on it’s own or have a play it’s also on CodePen.

Update:

Thanks to the impecably dressed Scott Riley and a quick codepen shuffle, it's been updated and made a little cleaner