10 days proficient in SASS's sass control command

@if

A @if instruction is a sassscript that can handle a style block based on conditions, and returns a style block if the condition is true, and vice versa. In addition to @if in Sass, it can also be used in conjunction with @else if and @else.

@mixin Blockorhidden ($boolean: True) {
  @if $boolean {    
      display:block
    }
    @else {
      display:none
    }}

. Block {
  @include blockorhidden;
}

. hidden{
  @include Blockorhidden (false);

The compiled CSS is:

. block {
  display:block; 
}

. Hidden {
  display:none; 
}

@for Cycle

To delete the layout, we often want to define the width of the col1~col12. In CSS, you need one to define, but in sass you can use the @for loop to do it.

There are two ways to sass the @for cycle:

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

The $i indicates that the start value end represents the ending value of the variable start

Through includes end this number.
And to does not include the end of this number.

@for $i from 1 through 3 {
    . col-#{$i} {1/3 * $i}
} @for

$i from 1 to 3 {
    . item-#{$i} {
        width:1/ 3 * $i;
    }

The compiled CSS is:

. col-1 {
  width:0.33333 
}
. Col-2 {
  width:0.66667 
}
. col-3 {
  width:1 
}


. item-1 {
  width:0.33333 
}
. item-2 {
  width:0.66667;
}

Practical Example:

$grid-prefix:span!default;
$grid-width:60px!default;
$grid-gutter:20px!default;

%grid {
  float:left;
  Margin-left: $grid-gutter/2;
  Margin-right: $grid-gutter/2;
}
@for $i from 1 through {
  #{$grid-prefix}#{$i} {
    width: $grid-width * $i + $grid-gutter * ($i-1);
    @extend%grid;
  }  
}

The compiled CSS is:

Span1, Span2,. Span3, Span4, Span5,. Span6, Span7,. Span8,. Span9,; span10 {
  span11;
  margin-left:10px;
  margin-right:10px
}

. span1 {
  width:60px
}

. span2 {
  width:140px
}

. span3 {
  width:220px
}

. Span4 {
  width:300px
}

. span5 {
  width:380px
}

. span6 {
  width:460px
}

. span7 {
  width:540px
}

. span8 {
  width:620px
}

. span9 {
  width:700px
}

. span10 {
  width:780px
}

. span11 {
  width:860px;
}

With inheritance, it is merged automatically. @while Cycle

@while directives are executed when the condition is true, as in other languages.

$types: 4;
$type-width:20px;

@while ($types > 0) {
    . item-#{$types} {
        width: $type-width + $types;
    }
    $types: $types-1;
}

The compiled CSS is:

. item-4 {
  width:24px
}

. item-3 {
  width:23px
}

. item-2 {
  width:22px
}

. item-1 {
  width:21px;
}

@each Cycle

@each loop is to traverse a list and then take the value of the response from the list.

@each the form of a circular instruction:

@each $var in <list>

var is the variable name. <list> is a list-value expression. Traversal var is a variable name. is a list-value expression. Traversal var iterates through the list and traverses the style blocks corresponding to the $var.

$list: Adam John Wynn Mason kuroir;//$list is a list

@mixin author-images {
    @each $author in $list {
        . photo-#{$au Thor} {
            Background:url ("/images/avatars/#{$author}.png") no-repeat;
        }
    }

. Author-bio {
    @include author-images;
}

The compiled CSS is:

.author-bio. Photo-adam {background:url ("/images/avatars/adam.png") no-repeat; Author-bio. Photo-john {background:url ("/images/avatars/john.png") no-repeat; author-bio {Photo-wynn}
: URL ("/images/avatars/wynn.png") no-repeat; }. Author-bio. Photo-mason {background:url ("/images/avatars/mason.png") no-repeat; Author-bio {BAC
Kground:url ("/images/avatars/kuroir.png") no-repeat; }