為什麼 Sass 不解析 calc() 函數內部的變數？

CSS Calc() 函數中的Sass 變數：未解析的變數錯誤

在使用Sass 的calc() 函數時，您可能會遇到Sass 的情況函數參數中的變數不被辨識。考慮以下場景：

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

雖然使用文字值 50px 產生預期結果，但切換到 $body_padding 變數會產生在 calc() 函數中維護該變數的輸出。

為了解決此問題並確保正確的變數解釋，一種建議的解決方案是使用以下方法在calc() 函數中插入變數語法：

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

專門針對此用例另一個可行的選項是利用border-box 屬性：

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

使用border-box 可確保height屬性包含填充，有效地消除了 calc() 函數中自訂計算的需要。

以上是為什麼 Sass 不解析 calc() 函數內部的變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！