Swatch Shorthand — A helper library for Sass names

Swatch Shorthand is a library that simplifies using Sass by providing "shorthand" names for common CSS parameters.

To install Swatch shorthand in your project:

$ npm install swatch-shorthand

# Or using Yarn
$ yarn add swatch-shorthand

To import it into your Sass project:

@import node_modules/swatch-shorthand/shorthand

Example

Here are some example conversions:

Sass | Swatch Shorthand :----|:---------------- background-color: blue | +bc(blue) font-family: Arial | +ff(Arial) margin: 0 | +m0 flex-direction: column | +fdc display: block | +block

Here's some example Sass:

body
  background-color: white
  color: black
  margin: 0
  padding: 0
  display: flex
  flex-direction: column

Here's the same Sass using Swatch Shorthand:

@import node_modules/swatch-shorthand/shorthand

body
  +bc(white)
  +c(black)
  +m0
  +m0
  +flex
  +fdc

Inspiration

This project was started to scratch a personal itch. I love Sass and I want to be able to write it quickly and efficiently.

I'm also attracted to the "piecemeal" approach of CSS libraries like Tachyons and Tailwind but I'm not a huge fan of mucking up HTML with a million classes. Instead I prefer mucking up my Sass with a million little Swatch Shorthand functions!