title: Trigger hover state in a mixin
body: <p>I've got a Less mixin with a default state and a hover state.
  Now I need to activate the hover state in the mixin when I'm hovering over the parent element.</p>
  
  <p><strong>Less</strong></p>
  
  <pre><code>#icons () {
    .settingsIcon() {
      background: url("settings.png");
      &amp;:hover {
        background: url("settings_hover.png");
      }
    }
  }
  
  .SettingsButton {
      height: 50px; 
      width: 200px;
     .icon {
         #icons &gt; .settingsIcon();
      }
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="SettingsButton" &gt;
    &lt;span&gt;Settings&lt;/span&gt;
    &lt;div class="icon"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to make sure that the same effect that happens on settingsIcon hover is triggered on the button hover also.
  So I think I need to do something like this, where I 'call' the <code>hover</code> of <code>settingsIcon</code> somehow. Something like this (not valid Less code)</p>
  
  <pre><code>.SettingsButton:hover {
    .icon {
       #icons &gt; .settingsIcon():hover;
    }
  }
  </code></pre>
  
  <p>How would I do that?</p>