Sass 高级

@if 三目运算

For explame:

$screenWidth: 500;
body{
  color: if($screenWidth > 768, blue, red);
}

is complied to:

body {
  color: red;
}

@if

For explame:

@if $screenWidth > 768{
  body{
    color: red;
  }
}

is complied to:

body {
  color: red;
}

@if…@else if…@else

For explame:

@if $screenWidth > 768{
  body{
    color: red;
  }
}
@else if $screenWidth >400{
  span{
    color: green;
  }
}
@else{
  p{
    color: blue;
  }
}

is complied to:

span {
  color: green;
}

@for

For explame:

@for $i from 1 to 5{
  .span#{$i}{
    width: 20% * $i;
  }
}

is complied to:

.span1 {
  width: 20%;
}

.span2 {
  width: 40%;
}

.span3 {
  width: 60%;
}

.span4 {
  width: 80%;
}

For explame:

@for $i from 1 through 5{
  .span#{$i}{
    width: 20% * $i;
  }
}

is complied to:

.span1 {
  width: 20%;
}

.span2 {
  width: 40%;
}

.span3 {
  width: 60%;
}

.span4 {
  width: 80%;
}

.span5 {
  width: 100%;
}

@while

For explame:

$j: 6;
@while $j > 0{
  .p#{$j}{
    width: 20% * $j;
  }
  $j: $j - 3;
}

is complied to:

.p6 {
  width: 120%;
}

.p3 {
  width: 60%;
}

@each

For explame:

$k: 1;
@each $c in blue, red, green {
  .div#{$k}{
    color: $c;
  }
  $k: $k+1;
}

is complied to:

.div1 {
  color: blue;
}

.div2 {
  color: red;
}

.div3 {
  color: green;
}

For explame:

@each $key,$color in (default, blue), (info, green), (danger, red){
  .text-#{$key}{
    color: $color;
  }
}

is complied to:

.text-default {
  color: blue;
}

.text-info {
  color: green;
}

.text-danger {
  color: red;
}

For explame:

@each $key, $value in (default: blue, info: green, danger: red){
  .label-#{$key}{
    color: $value;
  }
}

is complied to:

.label-default {
  color: blue;
}

.label-info {
  color: green;
}

.label-danger {
  color: red;
}