Skip to content

Instantly share code, notes, and snippets.

@tzi
Last active September 3, 2017 15:03
Show Gist options
  • Save tzi/2e54c245af91769ea912fa4e5f6d3820 to your computer and use it in GitHub Desktop.
Save tzi/2e54c245af91769ea912fa4e5f6d3820 to your computer and use it in GitHub Desktop.
Using a "next generation mixin" to generate themes in sass
// Passing arguments from a mixin to a content block
// Planned for Sass 4
// https://github.com/sass/sass/issues/871
// File: common.scss
$theme-colors: (
pink: #FF69B4,
orange: #FFA500,
);
@mixin theme() {
@each $theme, $color in $theme-colors {
.app--#{$theme} & {
@content($color);
}
}
}
// File: component.scss
.component {
@include theme() using($color) {
color: $color;
}
}
// This code should output
.app--pink .component {
color: #FF69B4;
}
.app--orange .component {
color: #FFA500;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment