scss- 条件语句 循环语句使用

@if @else if @else

$type: monster;
p {
   
  @if $type == ocean {
   
    color: blue;
  } @else if $type == matador {
   
    color: red;
  } @else if $type == monster {
   
    color: green;
  } @else {
   
    color: black;
  }
}
/*编译为*/
p {
   
  color: green; 
}

@for

两种格式：
@for $var from <start> through <end> 包含 与 的值
@for $var from <start> to <end> 只包含

$var 可以是任何变量，比如 $i； 和 必须是整数值

@for $i from 1 through 3 {
   
  .item-#{