[Day 16] Sass - Booleans

Hi 今天的主题是有写过任一种程序语言的人都会很熟悉的“条件判断式”，
下面会介绍 @if @else if @else

@if
if後方会加上需要判断的条件，判断结果为成立时，就会套用样式。

p {
  @if $device == desktop {
    font-size: 1.5rem;
  } 
  color: red;
  }
  
$device: mobile;

跑出来的css结果为

p {
   color: red;
   }

因为device为mobile，if後方的条件为不成立，
所以最後编译出的css并不会有font-size样式。

@else if
当if後方的条件不成立时，就会往下找@else if的条件，
依照@else if的排序一个一个往下找。
(如果都不成立，就会找@else，稍後会介绍)

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == moon {
    color: white;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
$type: monster;

因为type为monster，if後方的条件为不成立，往下找else if，
直到找到符合的条件，所以最後编译出的css为color: green。

// 转成 CSS
p {
  color: green;
}

@else
当if後方的条件不成立时，就会往下找@else if的条件，
如果@else if还是都不成立，就会找@else。
(如果没有@else if也会直接找@else)
我们直接用上一个例子

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == moon {
    color: white;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
$type: night;

因为type为night，if後方的条件为不成立，往下找else if也都不成立，
最後找@else，所以最後编译出的css为color: black。

// 转成 CSS
p {
  color: black;
}