數值運算子

Sass 支援針對數字的標準數學運算子集合。它們會自動在相容的單位之間轉換。

<expression> + <expression> 將第一個表達式的值加到第二個表達式。
<expression> - <expression> 從第二個表達式的值減去第一個表達式。
<expression> * <expression> 將第一個表達式的值乘以第二個表達式。
<expression> % <expression> 傳回第一個表達式的值除以第二個表達式的餘數。這稱為模數運算子。

  SCSS

  Sass

       程式碼試驗場SCSS 語法@debug 10s + 15s; // 25s
@debug 1in - 10px; // 0.8958333333in
@debug 5px * 3px; // 15px*px
@debug 1in % 9px; // 0.0625in

       程式碼試驗場Sass 語法@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug 1in % 9px  // 0.0625in

無單位數字可以與任何單位的數字一起使用。

  SCSS

  Sass

       程式碼試驗場SCSS 語法@debug 100px + 50; // 150px
@debug 4s * 10; // 40s

       程式碼試驗場Sass 語法@debug 100px + 50  // 150px
@debug 4s * 10  // 40s

具有不相容單位的數字不能與加法、減法或模數運算一起使用。

  SCSS

  Sass

       程式碼試驗場SCSS 語法@debug 100px + 10s;
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

       程式碼試驗場Sass 語法@debug 100px + 10s
//     ^^^^^^^^^^^
// Error: Incompatible units px and s.

單元運算子單元運算子永久連結

您也可以將 + 和 - 寫成單元運算子，它們只接受一個值。

+<expression> 傳回表達式的值而不更改它。
-<expression> 傳回表達式值的負數版本。

  SCSS

  Sass

       程式碼試驗場SCSS 語法@debug +(5s + 7s); // 12s
@debug -(50px + 30px); // -80px
@debug -(10px - 15px); // 5px

       程式碼試驗場Sass 語法@debug +(5s + 7s)  // 12s
@debug -(50px + 30px)  // -80px
@debug -(10px - 15px)  // 5px

⚠️ 注意！

由於 - 可以表示減法和單元負號，因此在空格分隔的列表中，可能會難以區分兩者。為了安全起見

進行減法運算時，請務必在 - 的兩側加上空格。
對於負數或單元負號，請在 - 之前加上空格，之後則不加空格。
如果單元負號位於空格分隔的列表中，請將其用括號括起來。

Sass 中 - 的不同含義按以下順序排列優先：

- 作為識別碼的一部分。唯一的例外是單位；Sass 通常允許任何有效的識別碼用作識別碼，但單位不能包含後跟數字的連字號。
沒有空格的表達式和字面數字之間的 -，會被解析為減法。
字面數字開頭的 -，會被解析為負數。
無論是否有空格，兩個數字之間的 - 都會被解析為減法。
- 位於非字面數字的值之前，會被解析為單元負號。

SCSS

Sass

     程式碼試驗場SCSS 語法@debug a-1; // a-1
@debug 5px-3px; // 2px
@debug 5-3; // 2
@debug 1 -2 3; // 1 -2 3

$number: 2;
@debug 1 -$number 3; // -1 3
@debug 1 (-$number) 3; // 1 -2 3

     程式碼試驗場Sass 語法@debug a-1  // a-1
@debug 5px-3px  // 2px
@debug 5-3  // 2
@debug 1 -2 3  // 1 -2 3

$number: 2
@debug 1 -$number 3  // -1 3
@debug 1 (-$number) 3  // 1 -2 3

除法除法永久連結

Dart Sass: 自 1.33.0 版本起
LibSass: ✗
Ruby Sass: ✗

與其他數學運算不同，Sass 中的除法是使用 math.div() 函式完成的。雖然許多程式語言使用 / 作為除法運算子，但在 CSS 中，/ 用作分隔符號（例如 font: 15px/32px 或 hsl(120 100% 50% / 0.8)）。雖然 Sass 支援使用 / 作為除法運算子，但此用法已被棄用，並將在未來的版本中移除。

斜線分隔值斜線分隔值永久連結

目前，Sass 仍然支援 / 作為除法運算子，它必須有一種方法來區分 / 作為分隔符號和 / 作為除法。為了實現這一點，如果兩個數字之間以 / 分隔，Sass 將會把結果列印為斜線分隔的形式，而不是相除的結果，除非滿足以下其中一個條件：

任一表達式都不是字面數字。
結果儲存在變數中或由函式返回。
運算用括號括起來，除非這些括號在包含該運算的列表之外。
結果用作另一個運算（/ 除外）的一部分。
結果由計算返回。

您可以使用 list.slash() 強制 / 作為分隔符號。

  SCSS

  Sass

       程式碼試驗場SCSS 語法@use "sass:list";

@debug 15px / 30px; // 15px/30px
@debug (10px + 5px) / 30px; // 0.5
@debug list.slash(10px + 5px, 30px); // 15px/30px

$result: 15px / 30px;
@debug $result; // 0.5

@function fifteen-divided-by-thirty() {
  @return 15px / 30px;
}
@debug fifteen-divided-by-thirty(); // 0.5

@debug (15px/30px); // 0.5
@debug (bold 15px/30px sans-serif); // bold 15px/30px sans-serif
@debug 15px/30px + 1; // 1.5

       程式碼試驗場Sass 語法@use "sass:list";

@debug 15px / 30px  // 15px/30px
@debug (10px + 5px) / 30px  // 0.5
@debug list.slash(10px + 5px, 30px)  // 15px/30px

$result: 15px / 30px
@debug $result  // 0.5

@function fifteen-divided-by-thirty()
  @return 15px / 30px

@debug fifteen-divided-by-thirty()  // 0.5

@debug (15px/30px)  // 0.5
@debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
@debug 15px/30px + 1  // 1.5

單位單位永久連結

Sass 強力支援基於實際單位計算方式的單位操作。兩個數字相乘時，它們的單位也會相乘。一個數字除以另一個數字時，結果的分子單位取自第一個數字，分母單位取自第二個數字。一個數字的分子和/或分母中可以包含任意數量的單位。

  SCSS

  Sass

       程式碼試驗場SCSS 語法@use 'sass:math';

@debug 4px * 6px; // 24px*px (read "square pixels")
@debug math.div(5px, 2s); // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em);

$degrees-per-second: math.div(20deg, 1s);
@debug $degrees-per-second; // 20deg/s
@debug math.div(1, $degrees-per-second); // 0.05s/deg

       程式碼試驗場Sass 語法@use 'sass:math'

@debug 4px * 6px  // 24px*px (read "square pixels")
@debug math.div(5px, 2s)  // 2.5px/s (read "pixels per second")

// 3.125px*deg/s*em (read "pixel-degrees per second-em")
@debug 5px * math.div(math.div(30deg, 2s), 24em)

$degrees-per-second: math.div(20deg, 1s)
@debug $degrees-per-second  // 20deg/s
@debug math.div(1, $degrees-per-second)  // 0.05s/deg

⚠️ 注意！

由於 CSS 不支援平方像素等複雜單位，因此將帶有複雜單位的數字用作屬性值將會產生錯誤。然而，這其實是一個偽裝的功能；如果您沒有得到正確的單位，通常表示您的計算有問題！請記住，您隨時可以使用@debug 規則來檢查任何變數或表達式的單位。

Sass 會自動在相容的單位之間轉換，但它會選擇哪個單位作為結果取決於您使用的 Sass 實作版本。如果您嘗試組合不相容的單位，例如 1in + 1em，Sass 就會拋出錯誤。

  SCSS

  Sass

       程式碼試驗場SCSS 語法// CSS defines one inch as 96 pixels.
@debug 1in + 6px; // 102px or 1.0625in

@debug 1in + 1s;
//     ^^^^^^^^
// Error: Incompatible units s and in.

       程式碼試驗場Sass 語法// CSS defines one inch as 96 pixels.
@debug 1in + 6px  // 102px or 1.0625in

@debug 1in + 1s
//     ^^^^^^^^
// Error: Incompatible units s and in.

如同現實世界的單位計算一樣，如果分子包含與分母單位相容的單位（例如 math.div(96px, 1in)），它們就會互相抵消。這使得定義用於在單位之間轉換的比率變得容易。在下面的範例中，我們將所需的速度設定為每 50 像素一秒，然後將其乘以轉場涵蓋的像素數，即可得到它應該花費的時間。

  SCSS

  Sass

  CSS

       程式碼試驗場SCSS 語法@use 'sass:math';

$transition-speed: math.div(1s, 50px);

@mixin move($left-start, $left-stop) {
  position: absolute;
  left: $left-start;
  transition: left ($left-stop - $left-start) * $transition-speed;

  &:hover {
    left: $left-stop;
  }
}

.slider {
  @include move(10px, 120px);
}

       程式碼試驗場Sass 語法@use 'sass:math'

$transition-speed: math.div(1s, 50px)

@mixin move($left-start, $left-stop)
  position: absolute
  left: $left-start
  transition: left ($left-stop - $left-start) * $transition-speed

  &:hover
    left: $left-stop



.slider
  @include move(10px, 120px)

CSS 輸出.slider {
  position: absolute;
  left: 10px;
  transition: left 2.2s;
}
.slider:hover {
  left: 120px;
}

⚠️ 注意！

如果您的算術結果產生錯誤的單位，您可能需要檢查您的數學計算。您可能遺漏了應該具有單位的數量的單位！保持單位的正確性，讓 Sass 可以在出現問題時提供有用的錯誤訊息。

您尤其應該避免使用像 #{$number}px 這樣的插值。這實際上並不會建立數字！它會建立一個看起來像數字的未加引號的字串，但它無法與任何數字運算或函式一起使用。請嘗試使您的數學計算保持單位的正確性，以便 $number 已經具有單位 px，或者寫成 $number * 1px。

⚠️ 注意！

Sass 中的百分比與其他所有單位一樣運作。它們不能與小數互換，因為在 CSS 中，小數和百分比的含義不同。例如，50% 是一個以 % 為單位的數字，Sass 認為它與數字 0.5 不同。

您可以使用單位算術在小數和百分比之間轉換。math.div($percentage, 100%) 將返回相應的小數，而 $decimal * 100% 將返回相應的百分比。您也可以使用math.percentage() 函式作為更明確地編寫 $decimal * 100% 的方式。