title: LESS: How to fully extend two classes when relationships between both of them exist
body: <p>I'll explain with an example.</p>
  
  <p>Imagine the following CSS rules</p>
  
  <pre><code>.parent {
    color: blue;
  }
  .child {
    color: red;
  }
  .parent .child {
    color: white;
  }
  </code></pre>
  
  <p>Now, imagine you want to create a class equivalent to <code>.parent</code> and another one equivalent to <code>.child</code> using LESS.</p>
  
  <p>If you use "extend" you achieve part of the objective:</p>
  
  <pre><code>.newParent {
    &amp;:extend(.parent all);
  }
  .newChild {
    &amp;:extend(.child all);
  }
  </code></pre>
  
  <p>Will render:</p>
  
  <pre><code>.parent,
  .newParent {
    color: blue;
  }
  .child,
  .newChild {
    color: red;
  }
  .parent .child,
  .newParent .child,
  .parent .newChild {
    color: white;
  }
  </code></pre>
  
  <p>Which makes your new classes <strong>almost</strong> equivalent to you old classes.</p>
  
  <p>Missing is <code>.newParent .newClass</code> from the last set of rules.</p>
  
  <p>Is there a way to achieve this full equivalence?</p>
  
  <p><strong>Note</strong>: This could be helpful for someone using Bootstrap and who wants to use other names for his classes (to achieve greater abstraction from the framework). For example, imagine you want to change the name for <code>.input-append</code> and <code>.add-on</code>, for which you'll need to extend all selectors related to both classes, including those in which both of them appear (like <code>.input-append .add-on { ... }</code>).</p>
  
  <p>Thanks in advance!</p>