title: Grouping CSS classes vs Individual Classes when have same attributes Performance - SASS/SCSS implementation
body: <p>Previously without SASS if classes share the same CSS attributes it's easier to group them as below</p>
  
  <pre><code>.header, .content, .footer {
     height:100%;
  
  }
  </code></pre>
  
  <p>but with SASS/SCSS etc managing styles are so much easier. 
  So the question is given the CSS performance consideration givent the mixin below</p>
  
  <pre><code>@mixin sameHeight{  
     height:100%;
  }
  </code></pre>
  
  <p>should the implementation be</p>
  
  <pre><code>.content {
    @include sameHeight; 
  }
  
  .footer {
    @include sameHeight; 
  }
  
  .header {
    @include sameHeight; 
  }
  
  /* CSS OUTPUT */
  
    .header {
         height:100%;
  
   }
  
    .content{
         height:100%;
   }
  
    .footer{
         height:100%;
   }
  </code></pre>
  
  <p>Or should it be</p>
  
  <pre><code>.header, .content, .footer {
     @include sameHeight; 
  
  }
  
  /* CSS OUTPUT */
  .header, .content, .footer {
         height:100%;   
  }
  </code></pre>