title: Less.css relative linking between classes
body: <p>I'm writing some sort of CSS framework for personal use, and ran into a problem. If you're an experienced CSS-writer, then I'm pretty sure you're familiar with LESS.CSS. So...</p>
  
  <p>I have my own color palette stored in LESS variables like so:</p>
  
  <pre><code>    @color-red: #...;
      @color-green: #...;
      @color-blue: #...;
  </code></pre>
  
  <p>And I assign each color to a specific class:</p>
  
  <pre><code>    .bg-red { background: @color-red; }
      .bg-green { background: @color-green; }
      .bg-blue { background: @color-blue; }
  </code></pre>
  
  <p>Then I have a class called <code>block</code>:</p>
  
  <pre><code>    .block {
           display: block;
           float: left;
           padding: 10px;
           margin: 10px;
      }
  </code></pre>
  
  <p>The purpose of the <code>.block:hover</code> thing would be to change the background of the current <code>block</code> element, and increment it - by let's say - #222. Normally, this would look something like:</p>
  
  <pre><code>    .block:hover {
           background: @background + #222;
      }
  </code></pre>
  
  <p>My only problem is, that we don't know what the <code>@background</code> is here, because we create the divs with <code>&lt;div class="block bg-blue"&gt;</code> where the <code>bg-...</code> part could be anything from the color palette.</p>
  
  <p>So I think I would need some kind of relative naming to target the current background. Could you help me solve this, please?</p>
  
  <p>P.S.: If you think I didn't explain it correctly, just imagine if this was PHP and we were doing this in CSS/LESS:</p>
  
  <pre><code>    $background += 222;
  </code></pre>