Skip to content

Instantly share code, notes, and snippets.

@philippkuehn
Last active August 29, 2015 14:13
Show Gist options
  • Save philippkuehn/ecc8299f2bcc194785ba to your computer and use it in GitHub Desktop.
Save philippkuehn/ecc8299f2bcc194785ba to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.1.0-beta)
// ----
// save options in map
// this have to be generated with php in a modules_options.scss
$module--text: (
module--text--146: (
color: #fff,
background-color: #000
),
module--text--345: (
color: blue,
background-color: red,
text__headline: (
color: green
)
)
);
$module--image: (
module--image--267: (
background-image: url('img.jpg')
)
);
// mixins for generating css for each module
@mixin render_module_options_values($attribute, $value){
.#{$attribute} {
@each $attribute, $value in $value {
@if type-of($value) == 'map' {
@include render_module_options_values($attribute, $value);
} @else {
#{$attribute}: $value;
}
}
}
}
@mixin render_module_options($module){
@each $attribute, $value in $module {
@if type-of($value) == 'map' {
@include render_module_options_values($attribute, $value);
}
}
}
// render module options
@include render_module_options($module--text);
@include render_module_options($module--image);
.module--text--146 {
color: #fff;
background-color: #000; }
.module--text--345 {
color: blue;
background-color: red; }
.module--text--345 .text__headline {
color: green; }
.module--image--267 {
background-image: url('img.jpg'); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment