Last Updated: February 25, 2016
·
1.43K
· conradical

Set up a colour palette with LESS

I fret over naming conventions - especially when I am on line 1,000 of my Less file and my variable that I want to use is on line 10 and I am wishing I could remember it!

I try to use the same naming convention for each project so I remember them. Since my mockups are built from a defined colour palette of primary, secondary and complimentary colours, my Less file follows that same naming convention. This works for me:

@primary-colour-one:  #xxx; /* Short note on usage... */
@primary-colour-two: #xxx; /* Short note on usage... */
@primary-colour-three: #xxx; /* Short note on usage... */

@secondary-colour-one: #xxx; /* Short note on usage... */
@secondary-colour-two: #xxx; /* Short note on usage... */
@secondary-colour-three: #xxx; /* Short note on usage... */

@complimentary-colour-one: #xxx; /* Short note on usage... */
@complimentary-colour-two: #xxx; /* Short note on usage... */
@complimentary-colour-three: #xxx; /* Short note on usage... */

I've found that if I spell out whole words then I keep it consistent with dashes between each. This way, I am not guessing if I named it @comp or @complimentary.

Less is about consistency and reusing - so I try to do the same with the naming convention.