Skip to content

Instantly share code, notes, and snippets.

@mturjak
Created November 13, 2013 09:14
Show Gist options
  • Select an option

  • Save mturjak/7446047 to your computer and use it in GitHub Desktop.

Select an option

Save mturjak/7446047 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
//--------------------------------------------------------//
// defining your map:
$brand_clr: (home: blue, about: orange, contact: yellow);
/*--------------------------------------------------------*/
/* iterating the map with @each */
@each $brand, $clr in $brand_clr {
body.#{$brand} {
background: $clr;
}
// and so on for other rules with brand specific styling
}
/*--------------------------------------------------------*/
/* or using the map-get() function */
body{
&.about {
background: map-get($brand_clr, about);
}
}
/*--------------------------------------------------------*/
/* using mixins */
$color: null;
@mixin branding {
@each $brand, $clr in $brand_clr {
&.#{$brand} {
$color: $clr;
@content;
}
}
}
body {
@include branding {
background: $color;
}
}
button {
/* general button styles */
@include branding {
color: $color;
}
}
/*--------------------------------------------------------*/
/* iterating the map with @each */
body.home {
background: blue;
}
body.about {
background: orange;
}
body.contact {
background: yellow;
}
/*--------------------------------------------------------*/
/* or using the map-get() function */
body.about {
background: orange;
}
/*--------------------------------------------------------*/
/* using mixins */
body.home {
background: blue;
}
body.about {
background: orange;
}
body.contact {
background: yellow;
}
button {
/* general button styles */
}
button.home {
color: blue;
}
button.about {
color: orange;
}
button.contact {
color: yellow;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment