Being Sassy with SASS

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!

But one thing I very rarely use are lists, loops and if statements. Ok, I use them in JavaScript, Ruby or any other language I decide to write. But in my SASS?! It just didn’t seem right to write some form of function to automatically create my CSS, I just preferred to write this myself.

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.

Spacing

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
.space-margin-A-xs {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px; }

.space-margin-T-xs {
	margin-top: 5px; }

.space-margin-R-xs {
	margin-right: 5px; }

.space-margin-B-xs {
	margin-bottom: 5px; }

.space-margin-L-xs {
	margin-left: 5px; }
// ...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!’.

Open Sourced!

Yes, yes it is open sourced for all you lovely lot to use!

Few things you might want to do first:

  1. Change the prefix you want to use. At the moment the $prefix variable is set to space. But you can set it to whatever you want it to be.
  2. Change the sizes you want. The $sizes variable 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 n you could set to zero.
  3. Change locations you want spacing added. This is in the $locations variable. 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.