Loops with @while

In this recipe, you will learn how to create loops with the @while control directive in SassScript.

Getting ready

Read 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...

Learn how to use the @while directive in Sass by performing the following steps:

1. Create a Sass template called list.scss. This template should contain the following SCSS code:

   $class-names: first, second, third;
   $number: length($class-names);
   
   $i: 1;
   
   @while $i <= $number {
     $class: nth($class-names, $i);
     .#{$class} {
        width: (100% / $number) * $i ;
      }
     $i: $i + 1;
   }

2. Then run the following command in your console:

   sass list.scss
   

3. The compiled CSS code from the previous steps will look like that shown here:

   .first {
     width: 33.33333%; }
   
   .second {
     width: 66.66667%; }
   
   .third {
     width: 100%; }

How it works...

The @while control directive runs and compiles the SCSS code between the curly...