It is no secret that I love CSS. But it is even less of a secret that I love SASS. It takes our regular CSS and allows us to do some pretty awesome stuff!
However, after writing the same selectors over-and-over again. Doing the same CSS over-and-over again. It was time to look at using these little used, but awesome features.
Most CSS codebase will have a group of utility classes that add spacing around elements. But most of these are written by hand, and can be time consuming to create.
After taking inspiration from Purple by Heroku, I took the plunge and made a SASS file that automatically creates all the spacing utility classes needed.
It outputs CSS like so...
/* ...lots of other CSS selectors *//* ...lots of other CSS selectors */
All you then have to do is add these classes to your HTML and away you go. You have a group of classes that will add a consistent margin or padding to any element. So when your designers ask for specific spacing, you can go back and say 'Already done!'.
Yes, yes it is open sourced for all you lovely lot to use!
Few things you might want to do first:
- Change the prefix you want to use. At the moment the
$prefixvariable is set to
space. But you can set it to whatever you want it to be.
- Change the sizes you want. The
$sizesvariable holds all the sizes currently used. Update these with what you want. Also, if you want, change the name of the size. So instead of no spacing being
nyou could set to
- Change locations you want spacing added. This is in the
$locationsvariable. The first value on the line is the text to add to the selector and then second is what CSS property to add. The
*will add all other properties in the list.