Color Me Sassv 1.3

Colour library for Sass

Dulux colours in yellow

1. CSS Preprocessors

I'm not going to go into detail into what css preprocessors are or which one is better, both SASS and LESS are both pretty cool and I believe every web designer should at least have a play with one of them.

One thing you need to know if you're new to this, SASS uses Ruby on Rails and LESS uses Javascript. That should help with your choice.

2. Setting Up

If your farmilliar with SASS or LESS this should be a walk in the park. Make sure the main _ColorMeSASS.scss file is imported at the very bottom so it will overwrite any similar colour variables you have.

3. Using the Colours

Now here's the fun part. If you want to use a colour all you need to do is type in it's variable name.

			
				body{
					background-color: $orangeDuller;
					color: $white;
				}
			
		

The cool thing about CSS pre-processors is you can make the colour lighter or darker, desaturate or saturate colours, change the hue, or even mix two colours together and it will calculate the correct hexadecimal value and place it in the compiled CSS. Pretty neat right.

Lightness
			
				/*  LIGHTEN  */ 

				body{
					background-color: lighten($yellowDark, 25%);
				}

				/*  DARKEN  */

				body{
					background-color: darken($pinkCoral, 76%);
				}
			
		
Saturation
			
				/*  DESATURATE  */

				body{
				    background-color: desaturate($amberDull, 14%);
				}

				/*  SATURATE  */

				body{
				    background-color: saturate($greenSea, 39%);
				}
			
		
Hue
			
				body{
					background-color: adjust_hue($purplePlum, 78); /* between 0 - 360 */
				}
			
		
More than one adjustment
			
				/*  HS (HUE & SATURATION)  */

				body{
				    background-color: adjust_color($brownBronze, $hue: 11%, $saturation: -8%)
				}

				/*  HSL (HUE, SATURATION & LIGHTNESS)  */

				body{
				    background-color: lighten(adjust_hue(desaturate($blueLighter, 8), 11), 0)
				}
			
		
Mixing Colours
			
				$cool_purple:  mix($red, $blue, 50%);

				body{
				    background-color: $cool_purple;
				}
			
		

The possibilities are pretty much endless. Have fun.
Don't forget to hit me up on twitter if you end up using this for a site you work on.