title: Defining Variable Variables using LESS CSS
body: <p>Say I have three separate color schemes that are used on various pages in a site. Each color has a a light, medium and dark tint defined, and the color scheme is defined by a class in the body. Assume that the "red" color scheme is the default. Like this:</p>
  
  <p><strong>Color Definitions</strong>:</p>
  
  <pre><code>@red-lt:   #121;
  @red-md:   #232;
  @red-dk:   #343;
  @green-lt: #454;
  @green-md: #565;
  @green-dk: #676;
  @blue-lt:  #787;
  @blue-md:  #898;
  @blue-dk:  #909;
  </code></pre>
  
  <p><strong>Basic Default Style Example</strong></p>
  
  <pre><code>body { background-color: @red-dk;
    #container { background-color: @red-md;
       p { color: @red-dk; }
    }
  }
  </code></pre>
  
  <p><strong>Different Color Scheme Style Example</strong></p>
  
  <pre><code>body.green { background-color: @green-dk;
    #container { background-color: @green-md;
       p { color: @green-dk; }
    }
  }
  </code></pre>
  
  <p>I'd like to use variables so that I don't have to re-write all of the color variations for each scheme, so that I can just write something like this:</p>
  
  <pre><code>body.[color-var] { background-color: @[color-var]-dk;
    #container { background-color: @[color-var]-md;
       p { color: @[color-var]-dk; }
    }
  }
  </code></pre>
  
  <p>…but I can't quite wrap my head around how to accomplish that. Help…?</p>