Why Is My CSS `calc()` Function Not Working?

Why the CSS calc() Function Is Not Working?

You may encounter issues when using the CSS calc() function, especially when attempting to subtract expressions containing px units. This can be caused by a common oversight: forgetting to include white space between operators.

Fixing the Notation:

To resolve this issue, ensure that there are spaces separating operators in your calc() expressions. For instance, instead of calc(100vw/4-(10px-4)), use calc(100vw/4 - (10px - 4)).

Nested Calculations:

The calc() function allows you to nest calculations within parentheses, as seen in the example below:

<code class="css">.one {
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /* Same as calc(20px + (40px * 2)) */
}</code>

Managing Dynamic Calculations:

In SASS loops, you can dynamically replace x in calc(100vw/x-(10px-x)) using the following approach:

<code class="sass">@for $i from 1 through 4 {
  .item-#{$i} {
    width: calc(100vw/#{$i} - (10px - #{$i}));
  }
}</code>

The above is the detailed content of Why Is My CSS `calc()` Function Not Working?. For more information, please follow other related articles on the PHP Chinese website!