sass - Function to dynamically create classes from lists -
im new sass , i'm confused way lists work. have multidimensional list this:
$stylethemes: { (15, bold, red), (12, normal, blue) }
i want function makes class each list in $stylethemes , puts values of list class. output want above list this:
.theme1{ font-size: 15; font-weight: bold; color: red; } .theme2{ font-size: 12; font-weight: normal; color: blue; }
can show me how can this? in advance.
the code produce desired results this:
$stylethemes: ( (15, bold, red), (12, normal, blue) ); @for $i 1 through length($stylethemes) { .theme#{$i} { font-size: nth(nth($stylethemes, $i), 1); font-weight: nth(nth($stylethemes, $i), 2); color: nth(nth($stylethemes, $i), 3); } }
however, you'll find isn't particularly flexible. you're better off using mappings property/values don't have guarantee specific order:
$stylethemes: ( (font-size: 15, font-weight: bold, color: red), (font-size: 12, font-weight: normal, color: blue) ); @for $i 1 through length($stylethemes) { .theme#{$i} { @each $prop, $val in nth($stylethemes, $i) { #{$prop}: $val; } } }
or
$stylethemes: ( theme1: (font-size: 15, font-weight: bold, color: red), theme2: (font-size: 12, font-weight: normal, color: blue) ); @each $theme, $properties in $stylethemes { .#{$theme} { @each $prop, $val in $properties { #{$prop}: $val; } } }
Comments
Post a Comment