Sass Control Command (loop) and sass control command Loop

Sass Control Command (loop) and sass control command Loop

@ If
@ IfA command is a SassScript that can process style Blocks Based on conditions. If the condition isTrueReturns a style block.FalseReturns another style block. In addition to @ if, Sass can also work@ Else ifAnd@ Else.

 1 $lte7: true; 2 $type: monster; 3 .ib{ 4     display:inline-block; 5     @if $lte7 { 6         *display:inline; 7         *zoom:1; 8     } 9 }10 p {11     @if $type == ocean {12         color: blue;13     } @else if $type == matador {14         color: red;15     } @else if $type == monster {16         color: green;17     } @else {18         color: black;19     }20 }

Compile to CSS:

1 //css style2 .ib{3     display:inline-block;4     *display:inline;5     *zoom:1;6 }7 p {8     color: green; 9 }

Suppose we want to control the hiding or display of an element, we can define a hybrid macro and control it by judging the value of the passed parameter through @ if... @ else...Display. As follows:

 1 //SCSS 2 @mixin blockOrHidden($boolean:true) { 3     @if $boolean { 4         @debug "$boolean is #{$boolean}"; 5         display: block; 6     } 7     @else { 8         @debug "$boolean is #{$boolean}"; 9         display: none;10     }11 }12 .block {13     @include blockOrHidden;14 }15 .hidden{16     @include blockOrHidden(false);17 }

Compiled CSS:

1 .block {2     display: block;3 }4 .hidden {5     display: none;6 }

 

 

 

@ For loop (upper)
In Sass@In the loopTwo methods:

@for $i from <start> through <end>@for $i from <start> to <end>

• $ I indicates a variable
• Start indicates the start value.
• End indicates the end value.

The difference between the two is the keywordThroughIndicatesIncluding endThis number, andToThenExcluding endThis number.

From <start> start loop to <end> end
The following code usesThrough keywordExample:

1 @for $i from 1 through 3{2     .item-#{$i} {width: 2em * $i;}3 }

Compiled CSS:

1 .item-1 {2     width: 2em;3 }4 .item-2 {5     width: 4em;6 }7 .item-3 {8     width: 6em;9 }

Start from <start> (1 in this example) and traverse until <end> (3 in this example ). Including the value of <end>.

To keywordExample:

1 @for $i from 1 to 3{2     .itme-#{$i} { width: 2 * $i;}3 }

Compiled CSS:

1 .item-1 {2     width: 2em;3 }4 .item-2 {5     width: 4em;6 }

The loop starts from <start> and goes through the loop until <end> ends. This type of loop stops the loop as long as it encounters <end> (the <end> value will not be traversed ).

@ For loop (lower)

@ FoRCode of each grid class generated by the application in the grid system:

 1 //SCSS  2 $grid-prefix: span !default; 3 $grid-width: 60px !default; 4 $grid-gutter: 20px !default; 5 %grid { 6     float: left; 7     margin-left: $grid-gutter / 2; 8     margin-right: $grid-gutter / 2; 9 }10 @for $i from 1 through 12 {11     .#{$grid-prefix}#{$i}{12         width: $grid-width * $i + $grid-gutter * ($i - 1);13         @extend %grid;14     } 15 }

Compiled CSS:

 1 .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { 2     float: left; 3     margin-left: 10px; 4     margin-right: 10px; 5 } 6 .span1 { 7     width: 60px; 8 } 9 .span2 {10     width: 140px;11 }12 .span3 {13     width: 220px;14 }15 .span4 {16     width: 300px;17 }18 .span5 {19     width: 380px;20 }21 .span6 {22     width: 460px;23 }24 .span7 {25     width: 540px;26 }27 .span8 {28     width: 620px;29 }30 .span9 {31     width: 700px;32 }33 .span10 {34     width: 780px;35 }36 .span11 {37     width: 860px;38 }39 .span12 {40     width: 940px;41 }

The @ for loop command can be used to loop from a small value to a large value, and also to a small value. And both forms support (increment or decrease).

 

 

@ While LOOP
@ WhileThe command also requires a SassScript expression (like other commands) and generates different style blocks until the expression value isFalseStop the loop. And@Commands are similar, as long@ WhileTheThe condition is true.It will be executed.
@ While command simple use case:

1 //SCSS2 $types: 4;3 $type-width: 20px;4 @while $types > 0 {5     .while-#{$types}{6         width: $type-width + $types;7     }8     $types: $types - 1;9 }

Compiled CSS:

 1 .while-4 { 2     width: 24px; 3 } 4 .while-3 { 5     width: 23px; 6 } 7 .while-2 { 8     width: 22px; 9 }10 .while-1 {11     width: 21px;12 }

 

 

 

@ Each loop

@ EachLoop is to goTraversalA list, And then retrieve the corresponding value from the list.
@ Each:

@each $var in <list>

$ Var isVariable name, <List> is a SassScriptExpression, He will returnList Value. The variable $ var is made in the list.TraversalAnd traverseStyle block.
Here is a simple example of the @ each command:

1 $ list: adam john wynn mason kuroir; // $ list is a list of 2 3 @ mixin author-images {4 @ each $ author in $ list {5. photo-# {$ author} {6 background: url ("/images/avatars/#{$author=.png") no-repeat; 7} 8} 9} 10 11. author-bio {12 @ include author-images; 13}

Compile CSS:

 1 .author-bio .photo-adam { 2     background: url("/images/avatars/adam.png") no-repeat; 3 } 4 .author-bio .photo-john { 5     background: url("/images/avatars/john.png") no-repeat;  6 } 7 .author-bio .photo-wynn { 8     background: url("/images/avatars/wynn.png") no-repeat;  9 }10 .author-bio .photo-mason {11     background: url("/images/avatars/mason.png") no-repeat; 12 }13 .author-bio .photo-kuroir {14     background: url("/images/avatars/kuroir.png") no-repeat; 15 }