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.
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.
Perform the following steps to understand how to use the @each directive in Sass:
Create a Sass file called
list.scssthat will contain an SCSS code like that shown here:$class-names: first, second, third; @each $class in $class-names { .#{$class} { color: white; } }Then, run the following command in your console:
sass list.scssThe compiled CSS code from the previous step should look like that shown here:
.first { color: white; } .second { color: white; } .third { color: white; }