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

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -