(12) SCSS練功坊-if

發表於 更新於 分類於
使用 @if 進行判斷

if 用法

在 scss 中，可以用 @if 進行判斷，如下。

1
2
3
4
5
6
7
8
9
10
11
@if(10 > 5) {
  .test-if {
    color: black;
  }
} @else {
  .test-if {
    color: white;
  }
}

// 以上會產上 color: black; 樣式

and 用法

當想判斷 兩個值是否同時符合條件時，可以用 and

1
2
3
4
5
6
7
8
9
10
@if(1 == 1 and 5 != 1) {
  .test-if {
    color: black;
  }
} @else {
  .test-if {
    color: white;
  }
}
// 以上會產上 color: black; 樣式