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

CSS calc() 函數中的 Sass 變數

將 Sass 變數合併到 calc() 函數中時，可能會出現挑戰。例如，在 calc() 中使用像 $body_padding 這樣的變數不會自動觸發所需的替換。相反，輸出類似於以下內容：

body {
    padding-top: 50px;
    height: calc(100% - $body_padding);
}

要修正這種情況並確保 Sass 識別需要替換 calc() 函數中的變量，請使用插值。使用語法#{$body_padding} 插入變數：

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

或者，使用border-box 屬性也可以有效解決這個問題：

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

透過這些方法，Sass現在將正確解釋和替換calc() 函數中的變量，實現所需的計算。

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