Generated by SassMeister.com.
<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>