如何在 CSS 的 `calc()` 函數中使用 Sass 變數？

理解CSS calc() 函數中的Sass 變數插值

您的程式碼使用了Sass 中的calc() 函數，它允許動態計算CSS 值。但是，當嘗試在 calc() 函數中使用 Sass 變數時，您會遇到問題。本文將深入探討這個問題的解決方案。

插入 Sass 變數

為了確保 calc() 函數正確解釋 Sass 變量，您需要在其中插入它們的功能。插值意味著將變數的值插入程式碼中。在 Sass 中，這可以透過將變數名稱括在 #{} 中來實現。

修訂後的程式碼

這裡是在計算中插入$body_padding 變數的修訂後程式碼() 函數：

body {
  height: calc(100% - #{$body_padding}); // Interpolation
}

透過對變數進行插值，Sass 計算其值值，在calc() 函數中取代它，並產生正確的CSS 輸出。

替代方法：使用 border-box

處理這種情況的替代方法就是將元素的box-sizing屬性設為border-box。這可確保高度計算包括其 100% 值內的填充。

使用 border-box 的修訂代碼

body {
  box-sizing: border-box;
  height: 100%; // 100% includes the padding
  padding-top: $body_padding;
}

以上是如何在 CSS 的 `calc()` 函數中使用 Sass 變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！