[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:; }

.order {

  order:; }

...

.order {

  order:; }

@for-through:

// includes 5

@for $x from 1 through 5 {

  .level {

    z-index: $x;

  }

}

output:

.level {

  z-index:; }

...

.level {

  z-index:; }

@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; }

...

巴特西

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

最新文章

热门文章