Scut is a collection of Sass utilities to ease and improve our implementations of common style-code patterns.

About

You can think of the word Scut as an acronym for Sass-CSS Utitilies.

Or think of it this way: Scut will help you, the frontend laborer, do your scut work.

(But do be careful how you use the word in polite company. It's meanings are ... many.)

Visit the Github repository

Experiment with Scut on Codepen

Scut is now at v1.0.0 — so should be stable. It has been around for a little while and used by some number of people, and during that time has undergone very few breaking changes; so it seems like the structure is sound, and I think it's ready to be called "stable." (Of course new non-breaking features will still be added and bugs will be fixed.)

Still: if some part of Scut that you had been using suddenly doesn't work, please check this documentation to see what changed. Also, you might want to have a look at the changelog.

For a thorough introduction to Scut, have a look at my article, "Introducing Scut," on CSS-Tricks.

Why use Scut?

Avoid repetition

Scut's primary goal is to save people like you and me from repeating the same few lines of styling code, over and over again, to achieve the same effect in different places.

Do difficult hacky things easily

Like vertically centering, or creating fluid-width boxes with a consistent aspect ratio.

Organize your rules

An oft-unsung quality of mixins and placeholders is that they organize your code, grouping rules according to the effects they combine to achieve. Even when a mixin applies only a couple of rules (like scut-hanging-indent ), it serves this end.

Implement best practices

Some of Scut's utilities, such as hd-breakpoint and font-face , are all about implementing "best practices" — without looking them up every time you need them.

And for any Scut utility, if you know of a better way to do the same thing, with more flexibility, better browser support, fewer extra <div> s, whatever, Scut should be updated accordingly. So contribute your discoveries and ideas!

What makes Scut unique?

Flexible abstractions of common patterns — nothing more

Scut doesn't require additional setup and processing, doesn't apply any default sizes, spacing, colors, etc. It is nothing like a "framework" — just a stylesheet that you can @import at will. Scut utilities should be as simple, flexible, and generic as possible: abstract patterns that you can work into your own designs without having to override anything or set up site-wide parameters. And you should be able to add them into your workflow with a simple @import statement, no matter what your stack.

No vendor prefixes

Most other pre-processor libraries do little more than vendor prefixing. Scut doesn't bother with that. (Do it your own way, of course; but I prefer Autoprefixer.)

@extend placeholders

All mixins that require no arguments — either because they have no arguments or because all their arguments have default values — are paired with placeholder selectors, which are good things to use, when you can.

scut- prefix