Sass @each with multiple variables

by

Just came across this, have the answer for you. In Sass, you can actually have a multidimensional list, so instead of constructing individual variables, you’d create one variable to hold them all, then loop over them:

$zoo: puma black, sea-slug green, egret brown, salamander red;

@each $animal in $zoo {
  .#{nth($animal, 1)}-icon {
    background-color: nth($animal, 2);
  }
}

You can have multidimensional lists just like you would have single dimensional lists as long as each nested dimension is separated in a different manner (in our case, commas and spaces).

UPDATE Oct 24, 2013

In Sass 3.3, there is a new data type called maps which are a hashed set of items. With this, we can rewrite my previous answer in the following way to much more closely resemble the desired result:

$zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red);

@each $animal, $color in $zoo {
    .#{$animal}-icon {
        background-color: $color;
    }
}

You can see this in action over at SassMeister

More Related Contents:

  1. Sass negative variable value?
  2. Merging selectors from mixins
  3. Sass and rounding down numbers. Can this be configured?
  4. CSS for button with right triangle at lower right [closed]
  5. Import regular CSS file in SCSS file?
  6. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  7. Angular-cli from css to scss
  8. Sass Variable in CSS calc() function
  9. How to dynamically generate a list of classes with commas separating them?
  10. SASS: randomly pick background-image from a list
  11. Is there a SASS.js? Something like LESS.js?
  12. Sass Invalid CSS Error: “expected expression”
  13. Can I use variables for selectors?
  14. Extending selectors from within media queries with Sass
  15. What does an “&” before a pseudo element in CSS mean?
  16. @import in @if statement in Sass
  17. Proper SCSS Asset Structure in Rails
  18. What does ‘&.’ in ‘&.sub-title’ indicates in scss?
  19. CSS-Only Sticky Table Headers In Chrome
  20. SCSS extend a nested selector and override the nested rulesets
  21. Rails 4: how do I use Sass Mappings?
  22. SASS – use variables across multiple files
  23. Sass @each variable interpolation [duplicate]
  24. Does LESS have an “extend” feature?
  25. how to change bootstrap version 4 button color
  26. Pass function or mixin by reference in SASS
  27. SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla’
  28. Using @font-face with Rails 3.1 app?
  29. How to combine and use multiple Next.js plugins
  30. SASS calculate HSL Difference between 2 colours

Leave a Comment