title: having problems with nested scss and shared group styling?
body: <p>I have the following UI widget that I'm creating:</p>
  
  <p><a href="http://codepen.io/ac123/pen/OpQxmd" rel="nofollow noreferrer">http://codepen.io/ac123/pen/OpQxmd</a></p>
  
  <pre><code>&lt;div id="MapKeys"&gt;
      &lt;div id="RegionalSupply"&gt;
          &lt;div class="font header"&gt;Regional supply&lt;/div&gt;
          &lt;div class="RegionalSupply circle"&gt;&lt;/div&gt;
          &lt;div class="RegionalSupply detail"&gt;Circles sized by the amount of change from the previous period&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="CorridorNetFlowDirection"&gt;
          &lt;div class="font header"&gt;Corridor net flow direction&lt;/div&gt;
          &lt;div class="rectangle"&gt;&lt;/div&gt;
          &lt;div class="CorridorNetFlowDirection detail"&gt;Lines sized by the amount of change in net flow from the previous period&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  #MapKeys
  {
      .font{
          &amp;.header{
              font-size:16px;
          }
          &amp;.detail{
              font-size:12px;
          }
      }
  
    /*
      .circle 
      {
          width: 14px;
          height: 14px;
          background: lightgrey;
          -moz-border-radius: 7px;
          -webkit-border-radius: 7px;
          border-radius: 7px;
          display:inline-block;
      }
    */
  
      .rectangle
      {
          width: 12px;
          height: 10px;
          background: lightgrey;
      }
  
      .display
      {
          &amp;.inlineBlock{ display: inline-block }
      }
  
      #RegionalSupply{
  
          height:100px;
          width:240px;
          border:solid purple 1px;
          display:inline-block;
          padding:10px;
  
          &amp;.header{
              font-size:16px;
          }
  
          &amp;.detail{
              display:inline-block;
              width:100px;
              font-size:12px;
          }
  
          &amp;.circle {
              width: 20px;
              height: 20px;
              background: red;
              -moz-border-radius: 10px;
              -webkit-border-radius: 10px;
              border-radius: 10px;
          }
      }
  
      #CorridorNetFlowDirection{
  
          height:100px;
          width:240px;
          border:solid red 1px;
          display:inline-block;
          padding:10px;
          /*&amp;.rectangle{
              width:50px;
              height:25px;
              background:blue;
          }*/
  
          &amp;.detail{
              display:inline-block;
              width:100px;
              font-size:12px;
          }
      }
  }
  
  #MapKeys
  {
      .font{
          &amp;.header{
              font-size:16px;
          }
          &amp;.detail{
              font-size:12px;
          }
      }
  
    /*
      .circle 
      {
          width: 14px;
          height: 14px;
          background: lightgrey;
          -moz-border-radius: 7px;
          -webkit-border-radius: 7px;
          border-radius: 7px;
          display:inline-block;
      }
    */
  
      .rectangle
      {
          width: 12px;
          height: 10px;
          background: lightgrey;
      }
  
      .display
      {
          &amp;.inlineBlock{ display: inline-block }
      }
  
      #RegionalSupply{
  
          height:100px;
          width:240px;
          border:solid purple 1px;
          display:inline-block;
          padding:10px;
  
          &amp;.header{
              font-size:16px;
          }
  
          &amp;.detail{
              display:inline-block;
              width:100px;
              font-size:12px;
          }
  
          &amp;.circle {
              width: 20px;
              height: 20px;
              background: red;
              -moz-border-radius: 10px;
              -webkit-border-radius: 10px;
              border-radius: 10px;
          }
      }
  
      #CorridorNetFlowDirection{
  
          height:100px;
          width:240px;
          border:solid red 1px;
          display:inline-block;
          padding:10px;
          /*&amp;.rectangle{
              width:50px;
              height:25px;
              background:blue;
          }*/
  
          &amp;.detail{
              display:inline-block;
              width:100px;
              font-size:12px;
          }
      }
  }
  </code></pre>
  
  <p>The circle scss is only needed for the RegionalSupply UI component but I can only seem to get the circle to work when I define the class outside of the RegionalSupply scss.</p>
  
  <p>Also, both UI components should have the same header and detail style. What would be the most elegant way to implement this in scss?  For some reason the scss styling does not appear to be getting applied.</p>