[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

2. 等於(=)和不等於(!=)，结果会回传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

3. 大於(>)、小於(<)、大於等於(>=)、小於等於(<=)，结果一样会回传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

4. modulo operator (%)，取得余数，例如:

@debug 5 % 2; // 1
@debug 1in % 9px; // 0.0625in

5. 布林运算子(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