Nested less css for tags : <p>I am creating some tags -- and have a bit of markup like this</p>

<pre><code>&lt;div class="tag"&gt;Tag&lt;/div&gt;
</code></pre>

<p>and this will create a small white border round tag. It could have different media variants and in this instance want to add an icon to the tag, I'm trying to architect the less but its not taking hold.</p>

<pre><code>&lt;div class="tag .get_app"&gt;Tag&lt;/div&gt;
&lt;div class="tag .get_app"&gt;Tag&lt;/div&gt;
&lt;div class="tag .get_app"&gt;Tag&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/pg886/182/" rel="nofollow noreferrer">http://jsfiddle.net/pg886/182/</a></p>

<pre><code>.tag {
  position: absolute;
  top: 0;
  left: 0;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 11px 35px 9px 20px;
  color: pink;
  background: white;
  display: inline-block;
  text-shadow: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  font-family: Roboto, sans-serif;
  &amp;::after {
    position: absolute;
    top: 6px;
    right: 6px;
    border-radius: 50%;
    background: red;
    padding: 4px;
    display: inline-block;
    color: white;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    .get_app &amp; {
      content: "\E884";
    }
    .play_arrow &amp; {
      content: "\E037";
    }
    .volume_up &amp; {
      content: "\E050";
    }
  }
}
</code></pre>
