title: Lighten color from parent in Less
body: <p>I am starting out with Less and one of the reasons I wanted to is because of the ligthen() function. So my first attempt was to do something with that.</p>
  
  <p>This is my HTML</p>
  
  <pre><code>&lt;div class="box blue"&gt;
      &lt;div class="boxbar"&gt;Foo&lt;/div&gt;
      blue
  &lt;/div&gt;
  </code></pre>
  
  <p>I finally got it working, but I doubt it's supposed be like this:</p>
  
  <pre><code>@blue:   #468ACE;
  @green:  #41A53D;
  @red:    #9C2525;
  @purple: #8938BF;
  
  div 
  {
      padding: 10px;
  }
  
  .blue { 
      background-color: @blue; 
      .boxbar { background-color: lighten(@blue, 10%); }
  }
  .green { 
      background-color: @green; 
      .boxbar { background-color: lighten(@green, 10%); }
  }
  .red { 
      background-color: @red; 
      .boxbar { background-color: lighten(@red, 10%); }
  }
  .purple { 
      background-color: @purple; 
      .boxbar { background-color: lighten(@purple, 10%); }
  }
  
  .boxbar 
  {
      height: 10px;
  }
  </code></pre>
  
  <p>How can I refactor this? Surely it must be easier to say "get your parent color, and lighten it a bit". I tried a couple of things: inherit (was worth a shot!), have the lightened versions inside .boxcar. But this obviously compiled to .boxcar .blue.. which is not what I want and I ended with what you can see here.. it works.. but it doesn't feel right. Then I would need to write code for every new color I introduce..</p>