Skip to content

Instantly share code, notes, and snippets.

@jonathan-beebe
Created April 16, 2014 18:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonathan-beebe/10918426 to your computer and use it in GitHub Desktop.
Save jonathan-beebe/10918426 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// ----
// Define items
$brand-default: (
'color': #999,
'font-size': 1em
);
$brand-bright: map-merge($brand-default, (
'name': bright,
'color': yellow
));
$brand-dark: map-merge($brand-default, (
'name': dark,
'color': black,
'font-size': 2em
));
// Create collection from items
$brands: (
$brand-default,
$brand-bright,
$brand-dark,
);
// Variant Mixin
@mixin brand-variant ($map) {
// Build the selector
$selector: '.brand';
@if(map-has-key($map, 'name')) {
$selector: #{$selector}--#{map-get($map, 'name')};
}
// Define the selector's styles
#{$selector} {
h3 {
font-size: map-get($map, 'font-size');
color: map-get($map, 'color');
}
}
}
// Loop over items, passing the value map as the parameter
@each $item in $brands {
@include brand-variant($item);
}
.brand h3 {
font-size: 1em;
color: #999999;
}
.brand--bright h3 {
font-size: 1em;
color: yellow;
}
.brand--dark h3 {
font-size: 2em;
color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment