0.1.22-SNAPSHOT • Published 6 years ago
swatch-shorthand v0.1.22-SNAPSHOT
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!
0.1.22-SNAPSHOT
6 years ago
0.1.21-SNAPSHOT
6 years ago
0.1.2-SNAPSHOT
6 years ago
0.1.1-SNAPSHOT
6 years ago
0.1.0-SNAPSHOT
6 years ago