Skip to content

Instantly share code, notes, and snippets.

@indieisaconcept

indieisaconcept/SassMeister-input-HTML.html

Created December 12, 2013 00:42
Show Gist options
  • Save indieisaconcept/7921332 to your computer and use it in GitHub Desktop.
Save indieisaconcept/7921332 to your computer and use it in GitHub Desktop.
Download ZIP
Sass maps to the rescue
Raw
SassMeister-input-HTML.html
<div class="news">
<div class="module-header">news</div>
</div>
<div class="sport">
<div class="module-header">sport</div>
</div>
<div class="business">
<div class="module-header">business</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// define a list of verticals
$verticals: (
news : blue,
sport : green,
business : grey
);
// define a overrides
$verticals: map-merge($verticals, (
news: green,
sport: yellow
));
@each $vertical, $color in $verticals {
.#{$vertical} .module-header {
background: $color;
}
}
Raw
SassMeister-output.css
.news .module-header {
background: green;
}
.sport .module-header {
background: yellow;
}
.business .module-header {
background: grey;
}
Raw
SassMeister-rendered.html
<div class="news">
<div class="module-header">news</div>
</div>
<div class="sport">
<div class="module-header">sport</div>
</div>
<div class="business">
<div class="module-header">business</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment