Cacher is the code snippet organizer for pro developers

<div class="cs-purple">
  <h2>Hello</h2>
  <p>This is a <a href="#">link</a></p>
  <button class="btn">Button</button>
</div>
<div class="cs-green">
  <h2>Hello</h2>
  <p>This is a <a href="#">link</a></p>
  <button class="btn">Button</button>
</div>

.cs-purple a, .cs-purple h2, .cs-purple h3 {
  color: #FF00FF;
}
.cs-purple .btn {
  background-color: #FF00FF;
}

.cs-green a, .cs-green h2, .cs-green h3 {
  color: #00FF00;
}
.cs-green .btn {
  background-color: #00FF00;
}

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

$sitetheme: ('cs-purple', '#FF00FF'), 
            ('cs-green', '#00FF00');

@each $scheme, $color in $sitetheme {
 
 .#{$scheme} {
   
   a, h2, h3 {
   
      color : #{$color};
   
   } 
   
   .btn {
   
     background-color : #{$color};
     
   }
   
 } 
  
}

<div class="cs-purple">
  <h2>Hello</h2>
  <p>This is a <a href="#">link</a></p>
  <button class="btn">Button</button>
</div>
<div class="cs-green">
  <h2>Hello</h2>
  <p>This is a <a href="#">link</a></p>
  <button class="btn">Button</button>
</div>