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.
Written by conradical
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#