Example of my pattern for naming LESS/SCSS variables

vars.less

// 1. Base palette

@primaryColor:   #245BB3;
@secondaryColor: #FDD33B;
@white:          #EAF2FF; // "white" - actually a very light blue

// 2. Semantic elements are derived from base palette

@backgroundColor: darken( @primaryColor,   40%);
@textColor:      lighten( @primaryColor,   40%);
@headerColor:     darken( @secondaryColor, 40%);
@borderColor:     darken( @primaryColor,   25%);
@linkColor:               @secondaryColor;
@highlight:               @primaryColor;

// Hereafter, I can either use the base colors (1) directly, 
// or use the derivative colors that I have created in (2)

body {
 background: @backgroundColor;
 color:      @textColor;
}

h1,h2,h3,h4 {
 color: @headerColor; 
}

a { 
 color: @linkColor;
}

.random-unique-element { 
  color:  @highlight; 
  border: 1px solid @borderColor; 
}

// But if I start doing this...

.another-random-element {
  border: 1px solid @linkColor; // <-- "link color" ??? 
}

// then it's time to add some new definitions in section 2 above :-)