Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
$logo-colors: (
red: #f00,
green: #0f0,
blue: #00f
);
// logo.scss
@mixin logo($color: red) {
background: $color;
}
@each $logo-color, $list in $logo-colors {
%logo--#{$logo-color} {
@include logo(#{$logo-color});
}
}
// branding.scss
@mixin branding__logo($color: red, $margin: 10px) {
@extend %logo--#{$color};
margin: $margin;
}
@each $logo-color, $list in $logo-colors {
%branding__logo--#{$logo-color} {
@include branding__logo($logo-color);
}
}
// style.scss
@each $logo-color, $list in $logo-colors {
.branding__logo--#{$logo-color} {
@extend %branding__logo--#{$logo-color};
}
}
.branding__logo--red {
background: red;
}
.branding__logo--green {
background: green;
}
.branding__logo--blue {
background: blue;
}
.branding__logo--red {
margin: 10px;
}
.branding__logo--green {
margin: 10px;
}
.branding__logo--blue {
margin: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment