首页 > 代码库 > [SCSS] Write similar classes with the SCSS @for Control Directive
[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; }...
[SCSS] Write similar classes with the SCSS @for Control Directive