數字

Sass 中的數字有兩個組成部分：數字本身及其單位。例如，在 16px 中，數字是 16，單位是 px。數字可以沒有單位，也可以有複雜的單位。有關更多詳細資訊，請參見下面的單位。

  SCSS

  Sass

       程式碼遊樂場SCSS 語法@debug 100; // 100
@debug 0.8; // 0.8
@debug 16px; // 16px
@debug 5px * 2px; // 10px*px (read "square pixels")

       程式碼遊樂場Sass 語法@debug 100  // 100
@debug 0.8  // 0.8
@debug 16px  // 16px
@debug 5px * 2px  // 10px*px (read "square pixels")

Sass 數字支援與 CSS 數字相同的格式，包括科學記數法，它以 e 寫在數字及其 10 的次方之間。由於瀏覽器對科學記數法的支援歷來參差不齊，Sass 總是將其編譯成完全展開的數字。

  SCSS

  Sass

       程式碼遊樂場SCSS 語法@debug 5.2e3; // 5200
@debug 6e-2; // 0.06

       程式碼遊樂場Sass 語法@debug 5.2e3  // 5200
@debug 6e-2  // 0.06

⚠️ 注意！

Sass 不區分整數和小數，因此例如 math.div(5, 2) 會返回 2.5 而不是 2。這與 JavaScript 的行為相同，但與許多其他程式語言不同。

單位單位永久連結

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% 更明確的寫法。

精確度精確度永久連結

Dart Sass: ✓
LibSass: ✗
Ruby Sass: 自 3.5.0 版起

LibSass 和舊版 Ruby Sass 預設為 5 位數的數值精確度，但可以設定為使用不同的位數。建議使用者將它們設定為 10 位數以獲得更高的精確度和向前相容性。

Sass 數字在內部以 64 位元浮點值表示。序列化為 CSS 時以及為了相等性比較，它們在小數點後最多支援 10 位數的精確度。這意味著幾件事：

在生成的 CSS 中，只會包含數字小數點後的前十位數。
像 == 和 >= 之類的運算，如果兩個數字在小數點後第十位數之前相同，則會將它們視為相等。
如果一個數字與整數的差距小於 0.0000000001，則在需要整數參數的函式（例如 list.nth()）中，它將被視為整數。

  SCSS

  Sass

       程式碼遊樂場SCSS 語法@debug 0.012345678912345; // 0.0123456789
@debug 0.01234567891 == 0.01234567899; // true
@debug 1.00000000009; // 1
@debug 0.99999999991; // 1

       程式碼遊樂場Sass 語法@debug 0.012345678912345  // 0.0123456789
@debug 0.01234567891 == 0.01234567899  // true
@debug 1.00000000009  // 1
@debug 0.99999999991  // 1

💡 有趣小知識

當數字用於與精度相關的地方時，會「延遲」四捨五入至小數點後 10 位。這表示數學函數將在內部使用完整的數值來避免累積額外的捨入誤差。