Useful color variables in Sass or Less

I read a post from David Walsh and got inspired to build upon his thoughts and write how his way could be merged with my way.

Our goal is to have a good naming convention for our sass or less color variables. Something that makes things less messy, is expandable and easy to change and use. Therefore I define my color variables in two steps. First i declare all the colors, then separately where they are used. It makes it really easy to switch colors without having to do so in multiple places. Search-replace across an entire project often ends in unintended changes in my experience. It’s way better to use unique variables for each module. Have a look at this.


@color-white:    #FFF;

//Reds
@color-monza:      #C80B0E;
@color-tamarillo:  #901618;

//Turquoise
@color-hippieBlue: #49A3A1;
@color-paradiso: #297775;

//Greys
@color-aquaHaze: #F0F4F6;
@color-shark: #27282D;

//================ Usage ====================
@color-text:   @color-white;

//Links
@color-link: @color-hippieBlue;
@color-linkHover: @color-paradiso;

//Navigation
@color-navbarLink:      @color-monza;
@color-navbarLinkHover: @color-tamarillo;

//Footer
@color-footerBackground: @color-shark;
@color-footerText:       @color-white;
@color-footerBorder:     @color-aquaHaze;

That way I won’t up with color variables named like this after a while.


@color-darkGrey
@color-grey
@color-lightGrey
@color-lighterGrey
@color-lightestGrey
@color-lightedestGrey
@color-almostWhite

And it’s way better than this


@color-color1
@color-color2
@color-color2.5
@color-color3
...
@color-color14

Which is also really hard to remember. To be expandable each color needs a unique name.
Get them at name that color. They individually give names to 1500 colors. If two colors gets the same name, either merge them together, (they are almost indistinguishable anyway) or use functions in sass or less such as darken(@color-monza,10%);

All of this resides in my _colors.less file and the in my main.less i simply do something like this.


.searchForm {
background-color: @color-searchFormBackground;
}

Found this useful? Check out my entire css convention.

Powered by kittens and brainpower.