What you're going to do is you're going to create a list that has the section name and the color space separated, with each pair comma separated. This will allow us to loop over each item and do something with it. See Lists and Control Directives for the technical explanation as to what's going on. The nth()
function says I want a specific piece of this list, in our case the 1st part of the list is the section we want, and the second part is the color. We wrap the first nth()
function in #{}
to tell Sass that we want to use the value of nth($section, 1)
instead of the string 'nth($section, 1'
.
$sections: 'div' red, 'section' green, 'article' blue;
@each $section in $sections {
.wrapper-#{nth($section, 1)} {
background-color: nth($section, 2);
}
}
.wrapper-div {
background-color: red;
}
.wrapper-section {
background-color: green;
}
.wrapper-article {
background-color: blue;
}