Skip to content

Instantly share code, notes, and snippets.

@lewismcarey

lewismcarey/SassMeister-input-HTML.html

Last active August 29, 2015 14:10
Show Gist options
  • Save lewismcarey/2fff3b1e0853cc3373cb to your computer and use it in GitHub Desktop.
Save lewismcarey/2fff3b1e0853cc3373cb to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<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>
Raw
SassMeister-input.scss
// ----
// 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};
}
}
}
Raw
SassMeister-output.css
.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;
}
Raw
SassMeister-rendered.html
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment