40
Day 15 of #100DaysOfCode!
Today's progress
Worked on using
@each to iterate through each item in a list or a map. What I learned
Similar to JavaScript's forEach() method. SASS also has a feature to iterate through each item in a list or map. Making it easier and faster to assign values to a variable.
For instance, let's say we want to create several
<div> elements with different background colors. One way we can solve this problem is using @each directive within SASS.Here's the code example.
$bg-colors: (
bg-color1: blue,
bg-color2: black,
bg-color3: red
);We created a variable list called
$bg-colors which stores three different background colors. Now we want to iterate through the list or map and assign each key to a new variable.
We can do that by doing the following...
@each $key, $bg-color in $bg-colors:{
.#{$bg-color}-background {background-color: $bg-colors}
}The
@each allows us to loop through the list or map and the $key is needed to reference the keys. Next we use the interpolation and wrap our values
$bg-color to get the values from our map or list.The output should be the following...
.blue-background {
background-color: blue;
}
.black-background {
background-color: black;
}
.red-background {
background-color: red;
}In Conclusion
@each allows you to iterate through the keys in a list or map and get their values. This is a useful tool especially when having to assign multiple values to a large set of class names.
40