Using Maps and the @each Rule in SASS to Create Ranged Classes

Introduction

This article is intended for front-end developers who understand the fundamentals of SASS CSS preprocessing syntax and concepts, and are interested in using code generating SASS features to build ranged CSS classes using available data structures and looping mechanisms within the SASS preprocessor standard library.

As the scope and complexity of front-end, web development increases us front-end web developers constantly have to find tools that help us become more efficient in our development. SASS provides us with multiple core features to help us keep our code DRY (Do not Repeat Yourself). The features we're going to be exploring with two basic examples in this article are:

• SASS Map (See official documentation)
• SASS @each rule (See official documentation)

Maps in a Nutshell

Maps are a data structure provided by SASS that follow the (<expression>: <expression>, <expression>: <expression>) key:value mapping rule.

@each in a Nutshell

@each is one of a few looping mechanisms provided by SASS which allows for iteration over lists and maps.

Context

Let's say you're building out a front-end for a project and you have CSS classes which are ranged in nature. For example, you need a five levels of opacity that need to be represented as discrete CSS classes.

0%, 25%, 50%, 75%, 100% (default)

The classes can be implemented as pure CSS:

.opac-0 {
  opacity: 0%;
}

.opac-25 {
  opacity: 25%;
}

.opac-50 {
  opacity: 50%;
}

.opac-75 {
  opacity: 75%;
}

.opac-100 {
  opacity: 100%;
}

Sure, you can write these by hand and move on with life. However, if you want to have a more defined step that includes 8 levels of opacity you'll be stuck re-writing the classes by hand. It's error prone and not maintainable. Let's use the mechanisms which SASS provides us to make the code more terse and maintainable using maps and @each.

SASS-ified Ranged Opacity Example

Defining the Map

// opacity map
$opacityMap: ("0": 0%, "25": 25%, "50": 50%, "75": 75%, "100": 100%);

Now we have a SASS variable which stores the map. We can now write the code which iterates over the contents of the map and generates resulting CSS:

Using @each to Generate the Opacity Classes

// generates ranged opacity classes based on the values in the opacity map
@each $key, $value in $opacityMap {
    .opac-#{$key} {
        opacity: $value;
    }
}

Let's break the code down.
We told the SASS preprocessor to take each $key, and $value in the map $opacityMap and make a CSS classed named .opac-0 ... n, with opacity: $value 0 ... k as their rules. The SASS preprocessor will continue the loop @each until the end of the map is reached giving us the following CSS output:

.opac-0 {
  opacity: 0%;
}

.opac-25 {
  opacity: 25%;
}

.opac-50 {
  opacity: 50%;
}

.opac-75 {
  opacity: 75%;
}

.opac-100 {
  opacity: 100%;
}

Conclusion

When learning CSS preprocessing it can be easy to stop learning after the features at mixins and variables functionality, with the occasional @use or @extend. Becoming a master at your craft means to always forge ahead and learn more. Remember, if you find yourself writing ranged CSS classes stop and take a few minutes to consider if you can use iteration and data containers to build a faster, safer and more maintainable solution. I hope this article helped some of you learning SASS to come up with creative ways to write better CSS.