Saturday 15 March 2014

sass - How to generate class from nested maps -



sass - How to generate class from nested maps -

i'd create classes basic font-setting sass. i've allready managed can @include $font-types nested maps in class, including responsive media-queries. goal automaticly create class each font-type in map $font-types wich contains settings defined in nested map. how can accomplish that?

here current sass-file: http://sassmeister.com/gist/d57a840259a9a01bf895

here solution: http://sassmeister.com/gist/cc95352f47cbaff9975b

$stylethemes: ( lead-1: ( font-family: arial, font-size: 30px, font-size-md: 20px, font-size-sm: 12px, ), lead-2: ( font-family: arial, font-size: 18px, font-size-sm: 10px ), ); @each $theme, $properties in $stylethemes { .#{$theme} { @each $prop, $val in $properties { @if $prop == font-family { #{$prop}: $val; } @if $prop == font-size { #{$prop}: $val; } @if $prop == font-size-md { @include size-m { font-size: $val; } } @if $prop == font-size-sm { @include size-s { font-size: $val; } } } } }

this way, can expand "stylethemes" , add together other font-sizes specific breakpoints @includ.

sass

No comments:

Post a Comment