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

Barbara Streisand

發布： 2024-12-02 20:27:11

原創

879 人瀏覽過

How Can I Use Sass Variables Inside CSS's `calc()` Function?

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中文網其他相關文章！

來源：php.cn

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章