loop control directives

Loops or iteration statements are tools in programming that allow for the repeated execution of certain piece of code on a range of values. There are a range of control directives that allow for building of iterative statements:

• @for loop
• @while loop
• @each loop

Here are the details and syntax of each directive.

@for control directive

The @for loop directive allows for iteration through a given range of values and executing a certain code within the given range. The benefit of @for loops is the ability to specify the range of values. In Sass, the @for loop has the following structure:

@for $variable from <start-reange> through <end-range>

or

@for $variable from <start-range> to <end-range>

Little unknown fact, you can iterate backwards with negative numbers as well. For example:

@for $variable from -10 through -1

Note the difference between the two statements is the use of through vs. to. The difference between the two is that the @for loop with the through keyword will iterate to the given range and include the end-range value while the to keyword will iterate only to the end-range. Let't look at the following example:

$class-name: span !default;
$start-width: 25%;

@for $var from 1 through 4 {
    .#{$class-name}-#{$var} {
        width: $start-width * $var;
    }
}

The above Sass code will compile to the following:

.span-1 {
  width: 25%;
}

.span-2 {
  width: 50%;
}

.span-3 {
  width: 75%;
}

.span-4 {
  width: 100%;
}

The same example re-written using the to keyword instead of the through keyword:

$class-name: span !default;
$start-width: 25%;

@for $var from 1 to 4 {
    .#{$class-name}-#{$var} {
        width: $start-width * $var;
    }
}

The above Sass code will compile to the following:

.span-1 {
  width: 25%;
}

.span-2 {
  width: 50%;
}

.span-3 {
  width: 75%;
}

As you can see, when using through starting from 5 and ending in 10 will include 1, 2, 3, and 4. While using the to keyword starting from 5 and ending in 10 will include 1, 2, 3, but NOT 4.

@for loops and functions

Building your own functions will be a key part of using many of these control directives and @for loops are no exception. As you advance into more complex examples in your project you undoubtedly will start working with lists. In the next section on @while loops, we will use a list to influence the output CSS. Depending on how you want to iterate through your list, something you may want to do is reverse the order of the list. Sass does not support this directly, but we can create a custom function using the @for directive to address this.

Example

@function em($value, $context: 16) {
  @return $value / $context;
}

@function reverse($list) {
   $result: ();

   @for $i from length($list) * -1 through -1 {
      $result: append($result, nth($list, abs($i)));
   }
   @return $result;
}

$list: american virgin delta;
$column: reverse($list);
$length: length($column);

@while $length > 0 {
  .ad-#{nth($column, $length)} {
    font-size: em(10 * $length);
  }
  $length: $length - 1;
}