Transpile SCSS to CSS using node-sass

Organize SCSS into Multiple Files with Partials

Organize Styles with SCSS Nesting and the Parent Selector

Use SCSS Variables for Readable and Maintainable Stylesheets

Use Standard Built-in SCSS Functions for Common Operations:

Reuse Styles with the SCSS @mixin Directive

Reuse Styles with the SCSS @extend Directive

Write similar classes with the SCSS @for Control Directive

Loop Over Data with the SCSS @each Control Directive

Write Custom Functions with the SCSS @function Directive

Learn the Best and Most Useful SCSS

The SCSS @for directive is great when we know how many iterations are required and we only need 1 variable. What if we need multiple variables to iterate over data sets? Hello SCSS maps and the @each control directive! In this lesson, we’ll check out iterating with lists and looping over data sets with maps and the @each directive.

[00:00] We have some container and logo classes. To iterate with the each directive, we start with each. Then name the iteration variable, for each hero in something that has values.

[00:12] A SAS list is series of values separated by commas or white space, like an array. The each directive will loop over each value in the list, it will loop four times because there are four values, and the iteration variable will represent each value in the list.

[00:29] Let's interpolate the loop variable for the class name and the background image. Now, we have some hero logos. Let's add the classes to the HTML and see how it looks in the browser.

[00:47] Now, the list could get bigger, or we may want to reference it later, let's put our list in the variable. The each directive can also loop over maps. Maps have to be surrounded by parentheses and their values are separated by commas.

[01:02] A map is treated as a list of pairs, for each pair of values in the breakpoints map, we have a size and a break point. Let's use the breakpoint variable for mediaquery, and we can use it for the container width, too.

[01:21] How about we use the size variable as the content of the before. Now, we have our container width classes. Let's add those to the HTML too and see how they look in the browser. Now map values can be any SAS object, we can make a map of container widths and breakpoints.

[01:48] We need to update the size variable to width, change the map, get rid of the before, and update the width value. Here's our new width values, and let's see how they look in the browser. We can also think of maps as key-value pairs.

[02:13] Let's use our breakpoints map again, and make a container widths map with the same keys. Now, this variable represents the size value in the breakpoints map. The mapGet function returns the value in a map based on the value's key.

[02:32] We can get to values of the container widths map with the size variable from the breakpoints map. Again, the size variable represents the key in each loop of the breakpoints map, and since both maps have the same keys, the mapGet function will use the key to return the container width value for each loop.

[02:54] The width values haven't changed, because they're the same values that were in the container widths and breakpoints map. Again, lists and maps can contain any SAS value.

[03:06] We could have nested lists, nested maps, or a combination of both. Here, we have a list of nested lists. Again, we can write lists with commas or white space, each line is a list, and because each line is separated with a comma, then each line is now a value in a list. We can surround lists with parentheses, too, which might make it a little easier to read.

[03:33] Now, we need to loop over the hero media list. The nested lists are the values for each iteration, we need a variable for every value in each nested list.

[03:45] Let's make another mediaQuery. We can use the breakpoint values for min and max width, interpolate the name variable for the class name, and set the value for the background color.

[03:58] Just for fun, let's add some transition to the container class. Now, we have our new mediaQuery, we just need to add the classes to the HTML and let's check it out in the browser. Our name values are the same values as our superhero list.

[04:25] We could just reuse the superhero list with the nth function, the nth function works on list, like the mapGet function works on maps, but instead of a key, it uses the index.

[04:36] Again, lists are like arrays, except the first index is a 1. We get the values from the superheroes list based on the index. This variable is now the index. Now, the class names haven't changed, because the nth function returns the same values.

[04:53] Iterating with lists, maps, and the each directive is cool, but don't forget we also used interpolation and some built-in SAS functions.

Course

Learn the Best and Most Useful SCSS

Loop Over Data with the SCSS @each Control Directive

Share this video with your friends