iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

使用SASS(SCSS)建立自己的CSS Library系列 第 11

[Day 11] Sass - Operators

Operators

今天要來介紹一下Sass的Oerators-運算功能
雖然在一般的CSS中,我們可以用calc()計算寬度、高度
但在Sass內支援的運算更多更廣,寫起來也更加簡潔~

在Sass中有多種運算子,寫起來也和其他程式語言類似,下面就來一一快速介紹吧!

  1. 基本的四則運算 +,-,*,/,例如:
@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65
@debug (10px + 5px) / 30px; // 0.5
// 如果不同單位會自動轉型
@debug 100px + 50; // 150px
  1. 等於(=)和不等於(!=),結果會回傳true或false,例如:
@debug 1 + 2 * 3 == 1 + (2 * 3); // true
// 當然也可以放其他單位或字串
@debug 1px == 1px; // true
@debug 1px != 1em; // true
@debug "Helvetica" == Helvetica; // true
@debug "Helvetica" != "Arial"; // true
  1. 大於(>)、小於(<)、大於等於(>=)、小於等於(<=),結果一樣會回傳true或false,例如:
@debug 100 > 50; // true
@debug 10px < 17px; // true
@debug 96px >= 96px; // true
@debug 1000ms <= 1s; // true
// 如果不同單位會自動轉型
@debug 100 > 50px; // true
@debug 10px < 17; // true
  1. modulo operator (%),取得餘數,例如:
@debug 5 % 2; // 1
@debug 1in % 9px; // 0.0625in
  1. 布林運算子(not、and、or),例如:
@debug not true; // false
@debug not false; // true

@debug true and true; // true
@debug true and false; // false

@debug true or false; // true
@debug false or false; // false

上面程式碼一樣都可以在任一個.scss檔案內做練習,今天就介紹到這!

參考資料

https://sass-lang.com/documentation/operators


上一篇
[Day 10] Sass - Values
下一篇
[Day 12] Sass - 常用的內建Modules
系列文
使用SASS(SCSS)建立自己的CSS Library21

尚未有邦友留言

立即登入留言