Why Doesn't Sass Resolve Variables Inside the `calc()` Function?

Sass Variable in CSS Calc() Function: Unresolved Variable Error

When utilizing Sass's calc() function, you may encounter instances where Sass variables are not recognized within the function's arguments. Consider the following scenario:

$body_padding: 50px

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

While employing the literal value 50px generates the expected results, switching to the $body_padding variable results in an output that maintains the variable within the calc() function.

To resolve this issue and ensure proper variable interpretation, one recommended solution is to interpolate the variable within the calc() function using the following syntax:

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

Another viable option, specifically for this use case, is to utilize the border-box property:

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

Employing border-box ensures that the height property encompasses the padding, effectively eliminating the need for custom calculations within the calc() function.

The above is the detailed content of Why Doesn't Sass Resolve Variables Inside the `calc()` Function?. For more information, please follow other related articles on the PHP Chinese website!