Skip to content

Instantly share code, notes, and snippets.

@Snugug
Created June 29, 2012 13:16
Show Gist options
  • Save Snugug/3017855 to your computer and use it in GitHub Desktop.
Save Snugug/3017855 to your computer and use it in GitHub Desktop.

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment