Auto-magically generate Sass color variables using palettes from COLOURLovers.
For day-to-day use, I recommend using
npm to install
npm install -g sass-colour-lover
If you plan on contributing to this project, you can install
sass-colour-lover locally using
Clone the project:
git clone email@example.com:magicink/sass-colour-lover.git
Navigate into the project directory and the build dependencies:
Install the module globally (may require administrative access)
npm install . -g
Or, if you prefer, link it (may require administrative access)
At this point, the
sass-colour-lover command will be available from your command prompt.
At a minimum, the ID of the palette needs to be passed to
sass-colour-lover. There are two ways to do this.
The easiest way is go to COLOURLovers and copy the address of a palette you like. After that, simply paste the url in as a parameter.
sass-colour-lover# These will also work:# <id># www.colourlovers.com/palette/<id>
This generates a Sass file called
_palette.scss in the current working directory. The contents of this file appear like this:
// Palette: Jujubee// Author: jaymepollock//
If you would like to generate Sass variables from multiple palettes, you can use the
--ids= parameter. Pass the IDs as a comma seperated list.
The contents of the generated file appear like so:
// Palette: Spavian// Author: Spammy//// Palette: my front porch// Author: realitybites//// Palette: thrill worth seeking// Author: lesaint//
Specifies where you would like to save your file.
# This produces a file called '_colors.scss'sass-colour-lover --ids=3143 --file=_colors.scss# Same file, one directory upsass-colour-lover --ids=3143 --file=../_colors.scss
Generate colors in either hexadecimal or RGB formats.
sass-colour-lover --ids=72313 --color=hex
// Palette: cutty sark.// Author: bijouloveshues// .
sass-colour-lover tries its very best to generate variable names based on the names selected by the palette's authors. That being said COLOURLovers allows for some pretty gnarly naming conventions that sometimes do not mesh well with Sass. There are likely to be edge cases that haven't been caught. Here are some things that get sanitized by
Numbers cannot be used as the first character of a variable name. If detected, the string 'color-' is prepended to the start of the variable name.
// Palette: 2// Author: heheherrr//
If a duplicate name is detected, a simple counter is appended to the end of all variables that share the name.
// Palette: That's Not Butter!?!// Author: retsof// !!
Sometimes names are entirely comprised of invalid characters. In which case, the color name is changed to
They exist... and we love them anyway.
// Palette: ๓๏ภ๏t๏ภ๏ยร * l๏שє// Author: -Yonder-// ๏ภ๏t๏ภ๏ยร_*_l๏שє
variable_nameas opposed to