運算子

Sass 支援一些處理不同值的實用 `運算子`。這些運算子包含標準的數學運算子，例如 `+` 和 `*`，以及適用於其他各種類型的運算子。

⚠️ 注意！

在 Sass 的早期發展階段，它增加了對顏色進行數學運算的支援。這些運算分別對顏色的 RGB 色板進行運算，因此將兩種顏色相加會產生一種顏色，其紅色色板為兩種顏色紅色色板的總和，依此類推。

這種行為並不是很有用，因為逐個色板的 RGB 算術與人類感知顏色的方式並不完全相符。顏色函式的加入更有用，並且不建議使用顏色運算。LibSass 和 Ruby Sass 仍然支援顏色運算，但它們會產生警告，強烈建議使用者避免使用它們。

運算子優先順序運算子優先順序 永久連結

Sass 擁有一套相當標準的 運算子優先順序，從高到低排列如下：

  1. 一元運算子 not、+、- 以及 /。
  2. *、/ 以及 % 運算子。
  3. + 以及 - 運算子。
  4. >、>=、< 以及 <= 運算子。
  5. == 以及 != 運算子。
  6. and 運算子。
  7. or 運算子。
  8. 在允許的情況下，= 運算子。
Playground

SCSS 語法

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true
Playground

Sass 語法

@debug 1 + 2 * 3 == 1 + (2 * 3)  // true
@debug true or false and false == true or (false and false)  // true

括號括號 永久連結

您可以使用括號明確控制運算順序。括號內的運算永遠會優先於括號外的運算。括號甚至可以巢狀，在這種情況下，最內層的括號會被優先計算。

Playground

SCSS 語法

@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65
Playground

Sass 語法

@debug (1 + 2) * 3  // 9
@debug ((1 + 2) * 3 + 4) * 5  // 65

單一等號單一等號 永久連結

Sass 支援一種特殊的 = 運算子，它只允許在函式參數中使用，它會建立一個 未加引號的字串，其兩個運算元以 = 分隔。這是為了向後相容非常舊的僅適用於 IE 的語法。

Playground

SCSS 語法

.transparent-blue {
  filter: chroma(color=#0000ff);
}
Playground

Sass 語法

.transparent-blue
  filter: chroma(color=#0000ff)

CSS 輸出

.transparent-blue {
  filter: chroma(color=#0000ff);
}