Why You Should Consider Using SCUT SASS Utilities

Writing CSS can feel like digging a ditch. You shovel, and you shovel, and you shovel some more. Then someone tells you that you’re digging the ditch the wrong way, so you turn around and dig the other way. You shovel and shovel and shovel… Oops, wrong way again!

After a while, you end up digging a pit instead of a ditch, and now all the water sits in one place instead of flowing from one end to the other. Dirt is everywhere, and you can’t remember why you were digging the ditch in the first place or where the ditch is supposed to be going. Any changes to the “pit” at this point would get you into deeper water.

This, my friends, is poorly written CSS.

“But I use <insert CSS preprocessor here>, so MY stylesheets are way more sophisticated than a silly pit!”

Friend, a pit dug with a silver spoon is still a pit.

If your code isn’t organized, consistent, and readable, it will be difficult to maintain. If it’s difficult to maintain, it’s difficult to reuse. If it’s difficult to reuse, you end up doing the same work over and over again (digging the same ditch over and over again).

Let me introduce you to SCUT: SASS Utilities for the Front End Laborer!

Scut takes care of the ditch-digging for you, and allows you to focus on where the ditch is going. Let’s look at a quick example:

Have you ever wanted to vertically center a <div>? So have at least two and a half million other people! This is a common problem, and there are as many answers as there are people looking for them. With Scut, I can do this in one line, and I have a consistent method of vertical centering that I (and my team!) can use across an entire project:

@include scut-center-transform(y);

Egad! The brevity!

Let’s look at another example. Have you ever seen a style rule-set like this?

div.className {
  margin: 0 auto;
  height: 100px;
  border: 5px solid $some-color-var;
  border-top: none;
  margin-bottom: 12px;
  width: 100px;
  color: $another-color-var;
}

Without looking, can you tell me the dimension of a div that style? Did you have to think back and remember, “What was the width? Oh I remember,100px. But what was the height? Oh yeah, 100px.” Well if you remembered that much, congrats. I bet was probably annoying having to go through that list of styles in your head. If you’re like me, you probably had to look back and sort through the styles in your head to put together the height and width and give me the final answer of “a width of100px and a height of 100px.” Let’s see how Scut would have handled this:

div.className {
  @include scut-center-block;
  @include scut-margin(n n 12px);
  @include scut-border(5px solid $some-color-var, n y y y);
  @include scut-size(100px 100px);
  color: $another-color-var;
}

Woah! That’s so much more descriptive, and all the related styles are grouped together. As a bonus, we’re no longer unnecessarily setting ‘margin-top: 0’. See the first two n’s in the ‘scut-margin’ rule? That means we don’t want to set the top or side margins. “But what happened to our ‘auto’ left and right margins?” Check out ‘scut-center-block’: it sets ‘margin-left: auto’ and ‘margin-right: auto’. That mixin is one of my best friends (it can even set the max-width if you pass in the optional parameter!)

This is a simple example, but I hope you can see the clarity and simplicity that Scut can provide when used across your code base. Scut comes with a ton of other mixins and functions that I hope you will find useful. For the full docs, visit davidtheclark.github.io/scut/.

I have had nothing to do with Scut’s development, so I can say without bias that I personally love Scut, and I think it would be a great tool in the toolbox for anyone that uses SASS. I hope it helps you as much as it has helped me.