Using @each Loops to Style Alert Boxes

Clean code is pretty code. One of my pet peeves is an unorganized mess. Especially when it comes to code. I’m always looking for better ways to write cleaner, prettier code. I try to live by the DRY (Don’t Repeat Yourself) concept… and maybe take it a little too seriously. Have you ever found yourself getting annoyed at copying and pasting styles just to create different variants of a component? Well, fear no more my fellow neat freaks and coders. @each loops to the rescue!

@each loops: A gift from the tidy code gods

There are four different types of loops: @if, @for, @each, and @while. Loops can serve as a helpful way to keep your code DRY, but be careful: infinite loops may cause your compiler to slow down or crash. Luckily we’re only going to be focusing on @each loops in this post. Because @each loops have a set list of items to run through, they rarely, if ever, have infinite issues.

What the heck is this glorious tidbit?!

Basically when you create your list of arrays, the loop will go through each item in that list, one by one, until it runs out of items to check. Because @each loops have a set list of items to run through, they are the most concrete and understandable type of loop.

Steps to create a loop for flash messages:

Step 1

Let’s get started on building flash messages that have different variants. The first thing you need to do is decide what variants/ or statuses you want of the flash message. I typically style for: success, alert, warning, and info. Once you know which variants you’re using, it’s time to write the markup for your flash messages! At Revelry, we adhere to the SUIT naming convention, so our flash messages are going to get two class names. One for the global flash styles, and one for the modifier styles (the styles that are specific to each variant).


<div class="Flash Flash--success">You did something right!</div>
<div class="Flash Flash--alert">ALERT!</div>
<div class="Flash Flash--warning">Here is a warning!</div>
<div class="Flash Flash--info">Boring info.</div>

Here, Flash is the class name used for the global styles for our flash messages. This is where you’ll apply the styles that will be used on all of the flash messages like the padding, font-size, ect. Flash--success, Flash--alert, Flash--warning, and Flash--info are the classes that will apply the modified styles to the base component like the different background colors.

Step 2

Next, in your stylesheet you want to create a list (or array) of what you want to loop through. In this case, we’re going to be creating a list of all the different types of flash messages with their corresponding values.

The values that you assign to each type of flash message are their color variables. If you don’t have color variables already defined for your flash messages, you’ll need to do so! Foundation and Bootstrap have status variables already defined and they can easily be customized to whatever hex code you prefer. However, if you’re using Bootstrap, be sure to check that the variable names match (they’re slightly different from what I’m using here)!


// VARIABLES:
$success: #3ADB76;
$alert: #FF3B30;
$warning: #FF9500;
$info: #5AC8FA;

// YOUR LIST/ARRAY
$flashes: (success $success),
          (alert $alert),
          (warning $warning),
          (info $info);

 

Step 3

The last step is to finally write this loop! The first line of the loop is going to read like this: “For each instance in the list called $flashes, do this”.  By default, loops are written with $i meaning “instance”. Since my flash loop is based on the status of the flash message, I’m going to rename my instance variable $i to $status —  this way the code is a little easier to understand. The $status indicators correlate to the modifier classes you used in the markup. So, success is the $status indicator for the class name Flash--success.



@each $status in $flashes {
  .Flash--#{nth($status, 1)} {
    background: nth($status, 2);
 }
}

Let’s talk a little bit about the #{ } being used and what the heck that means. This little guy in Sass is called Interpolation. Interpolation can also be referred to as “variable substitution” because it allows you to place values into other values (kind of like a placeholder). Tutsplus explains interpolation as so: “To put it concisely, interpolating is the process of evaluating an expression or a string containing one or more variables, yielding a result in which the variables are replaced with their corresponding values in memory.”

The next thing we need to talk about is the nth function. The nth function allows you to pull a value from a certain position in a list. This is what allows you to pull the first values in your list to build the class names as well as pull the second values in the list to define the background color. .Flash--#{nth($status, 1)} will render as .Flash--success, .Flash--alert, ect. And  background: nth($status, 2); will render as background: $success;,  background: $alert;, ect.

As a result, the loop will end up rendering out like this:


.Flash--success {
  background: $success;
}
.Flash--alert {
  background: $alert;
}
.Flash--warning {
  background: $warning;
}
.Flash--info {
  background: $info;
}

The final result:

There are many uses for @each loops, but remember to keep it DRY

To wrap things up, there are endless opportunities to use @each loops in your code, and flash messages are just one of them! Do yourself (and the developers that follow you) a favor and keep your code clean and DRY. It makes everyone’s life easier and less frustrating when they can make an update to one spot in the code instead of having to update in multiple locations.

Stay tuned for my next post about how you can style the text color to dynamically change based on the background, using the same list of state modifiers and their values. We’ll also add the close button and dynamically change the color of that too!

At Revelry, we do custom software design, development, and training.

We are a corporate innovation partner and startup studio,
and we are looking to add talented people to the team.
Read more about our process, meet the team, and apply here.

Keep in touch by subscribing to CODING CREATIVITY.