@each in SCSS with :nth-child and Sass Maps

Sassy @for loop sasses you all the way to 10, jerk.

One of my favourite things about SCSS is removing bloated declarations. Because of the simplicity of CSS, we run into a lot of really tedious code. You can make dry CSS, but creating repeating/complicated patterns across multiple pages or classes can sometimes be demoralizing. Moreover, sometimes it doesn’t feel necessary to continue to add more and more classes to try and create a target-able element.

A repeating card pattern with a coloured background.

What We Wanna Create.

Sometimes we want to create a repeating pattern across cards. This looks really easy, and there are many ways to do this, but why write something the long way? Using SCSS and helpful SCSS/Sass conventions, we can make sure this process is as painless as possible and super duper easy to maintain.

Map. It. Out.

Organizing data is one of my favourite parts about SCSS. SCSS Variables, give you a lot of power to minimize copy and pasting values over and over again. SCSS lists let you create a series of information which you can access easily; letting you group like concepts and like information together.

An example of a SCSS map with number/colour pairs.

SCSS maps allow you to organize your data even more by letting you create key/value paired ‘maps’ in your SCSS. This will allow achieve levels of complex organization in your SCSS and dry SCSS declarations - which will really help you when returning to the project in the future. The key in the above map could be any value (for the sake of this exercise we are using numbers to make use of the nth-child pseudo selector). In my previous post, we make use of the key taking the form of a class name.

Iterate through ‘dat map

How do we actually use this map we’ve created, though? Using SCSS’s @each iterator, we can make use of the number values that we’ve created in this SCSS map and combine them with the :nth-child pseudo selector to create a pattern.

example of an @each loop using the SCSS map wee created

With the loop above, we are using the @each to iterate through the SCSS map $boxColour. They $key in box colour will be a number (they key in the SCSS map), and we can pair this with the :nth-child pseudo selector to produce the SCSS which makes every 3rd div, starting with the $key value, the desire colour. We’ll use the $key’s property, $colour, to set the colour we’ve determined from the map.

Making use of the & Selector

You can further make use of this loop by riding yourself of writing similar hover effects with small difference. In this example, we are going to add a needless hover effect to these cards, which will change the background colour of the cards.

A hover declaration using the parent SCSS selector.

This saves us from typing out 3 separate hover declarations on each :nth-child. Instead, we write it once, and it produce all the SCSS we need to add that super cool hover effect.

What, why, huh?

A lot of the time one creates fancy SCSS, people ask ‘why?’. For me complex SCSS and using maps paired with iterators breeds dryer, more maintainable code. Returning to this code in some time won’t result in a bloated file that is hard to visually parse. Instead, you will find a sass map, paired with an iterator, and you know that we are doing the same thing for each iterator in that map.