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

Sass Variables Within CSS calc() Function

When incorporating Sass variables into the calc() function, challenges may arise. For instance, using a variable like $body_padding within calc() doesn't automatically trigger the desired substitution. Instead, the output resembles the following:

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

To rectify this situation and ensure Sass recognizes the need to replace variables within the calc() function, employ interpolation. Interpolate the variable using the syntax #{$body_padding}:

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

Alternatively, using the border-box property can also effectively resolve this issue:

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

With these methods, Sass will now correctly interpret and substitute variables within the calc() function, achieving the desired calculations.

The above is the detailed content of How Can I Use Sass Variables Inside CSS's `calc()` Function?. For more information, please follow other related articles on the PHP Chinese website!