Using @each

The @each control directive in Sass can be used to read the items of a list or map. In this recipe, you will learn how to use the @each control directive to dynamically create your CSS code.

Getting ready

You can use the Ruby Sass command-line compiler to compile the SCSS code into static CSS code. You can read about how to install and use the Ruby Sass command-line compiler in the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass.

How to do it...

Perform the following steps to understand how to use the @each directive in Sass:

1. Create a Sass file called list.scss that will contain an SCSS code like that shown here:

   $class-names: first, second, third;
   
   @each $class in $class-names {
     .#{$class} {
        color: white;
      }
   }

2. Then, run the following command in your console:

   sass list.scss
   

3. The compiled CSS code from the previous step should look like that shown here:

    .first {
     color: white; }
   
   .second {
     color: white; }
   
   .third {
     color: white; }

How...