标签：z-index between sel put css style param 1.5 character
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
标签：z-index between sel put css style param 1.5 character
原文地址：http://www.cnblogs.com/Answer1215/p/6815574.html
