[SCSS] Write similar classes with the SCSS @for Control Directive

Writing similar classes with minor variations, like utility classes, can be a pain to write and update. Sometimes just a single character is the only difference between classes and updating the defining parameter means we need to change it for every class name and value. We can write a class one time and the @for directive can write all the minor variations for us. If the similar classes need to be updated, with the help of the @for directive, they only need to be updated once. In this lesson we learn how to leverage the power of the SCSS @for control directive to relieve the pain.

Basic @for-to loop in SCSS:

// doesn't include 10
@for $i from 1 to 10 {
  .order {
    order: $i;
  }
}

output:

.order {
  order: 1; }

.order {
  order: 2; }
...
.order {
  order: 9; }

@for-through:

// includes 5
@for $x from 1 through 5 {
  .level {
    z-index: $x;
  }
}

output:

.level {
  z-index: 1; }

...

.level {
  z-index: 5; }

@for with 'if' condition:

@for $i from 0 through 10 {
  $value: .5 * $i;
  $has-decimal: floor($value) != $value;
  $class-name: if(
          $has-decimal,
          #{$value - 0.5}pt5, // if true
          $value   // if false
  );

  .mt-#{$class-name} {
    margin-top: #{$value}rem;
  }
}

output:

.mt-0 {
  margin-top: 0rem; }

.mt-0pt5 {
  margin-top: 0.5rem; }

.mt-1 {
  margin-top: 1rem; }

.mt-1pt5 {
  margin-top: 1.5rem; }

..

.mt-5 {
  margin-top: 5rem; }

Using attr selector:

@for $i from 0 through 10 {
  $value: .5 * $i;

  [class~="mt-#{$value}"] {
    margin-top: #{$value}rem;
  }
}

output:

[class~="mt-0"] {
  margin-top: 0rem; }

[class~="mt-0.5"] {
  margin-top: 0.5rem; }

[class~="mt-1"] {
  margin-top: 1rem; }

..

[class~="mt-5"] {
  margin-top: 5rem; }

@for with @mixin

@mixin light-color-class($color, $color-name,$i) {
  $color-value: if($i == 0, $color, lighten($color, 5% * $i));

  .#{$color-name}#{$i} {
    color: $color-value;
  }
}

@for $i from 0 through 5 {
  @include light-color-class(red, 'passion', $i);
  @include light-color-class(green, 'natural', $i);
  @include light-color-class(blue, 'cool', $i);
}

output:

.passion0 {
  color: red; }

.natural0 {
  color: green; }

.cool0 {
  color: blue; }

.passion1 {
  color: #ff1a1a; }

.natural1 {
  color: #009a00; }

.cool1 {
  color: #1a1aff; }

...