On a whim, and after an off-hand suggestion from Stef, I decided to pop some of my most-used Sass mixins - the ones that I include in every new project - up on Github. There’s nothing too ground-breaking here: a straight port of Eric Meyer’s reset.css, and a few CSS3 expanders.
The CSS3 expanders are probably the most interesting. I was getting irritated with having to type and retype certain of the new rules over and over again with the now ubiquitous -moz and -webkit prefixes. So I bundled them into mixins. Mixins are Sass’ way of adding very simple scripting to your stylesheets. Let me give you an example.
This Sass snippet:
div
width: 500px
height: 300px
+box-shadow(#000, 0px, 3px, 5px)
Gets rendered as:
div {
width: 500px;
height: 300px;
box-shadow: #000 0px 3px 5px
-webkit-box-shadow: #000 0px 3px 5px
}
Dead simple. I’ve wrapped up border-radius, box-shadow, gradient and box-sizing. Interested? Grab the files from Github.
Page 1 of 1
