Scut

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

To avoid confusions and collisions, all Scut utilities — mixins, placeholders, functions, variables, whatever — are prefixed with scut-.

Installation

Scut is a single file that can be copied and pasted, downloaded, or installed via Bower or RubyGems (for Compass).

No trouble at all. Here are the details.

Method 1: Get the File and Use It

  1. To get the file, you have the following options:

  2. To use the file, import _scut.scss into your own Sass/SCSS files. Like so: @import "path/to/scut";

Method 2: Compass Extension

  1. Install the RubyGem: gem install scut
  2. Include Scut in your project by using require and @import according to the usual Compass-extension methods. You know: require 'scut'. And @import 'scut'. That kind of thing.

Usage

Read about specific utilities here; then, having imported _scut.scss into your project, use them.

If you find the Scut documentation inadequate or upsetting, please file an issue or contact me.

If you have any questions about how to use Sass/SCSS, refer to the thorough Sass documentation.

Browser Support

Most of Scut's utilities should work just fine in any modern browser and IE8+.

If a specific utility does have compatibility issues (and some do), those issues should be noted in the documentation below. (If they are not, please let me know.)

Contributing

You can and should contribute.

Scut is all about easing the work of frontend laborers; extending tutorials into reusable utilities; encouraging best practices; and sharing good ideas — goals we can all agree on. I hope you'll find it a worthy experiment.

Visit the repository on Github and file issues and pull requests according to the usual Github methods. A little contribution guide is included in the README there.