Using CSS Variables with Calc() not working when 2nd parameter

Question

I'm new to using CSS variables with calc() so forgive me if this is obvious, but I'm trying to perform the following calculation and can't for the life of me figure out why it's not working:

$h2-font-size: 21px;

--padding-top: calc(#{$h2-font-size}/3);
--padding-bottom: calc(#{$h2-font-size}/var(--padding-top));

padding-top: var(--padding-top);
padding-bottom: var(--padding-bottom);

The first part calculates OK (i.e. --padding-top: calc(#{$h2-font-size}/3);) correctly works out to 7 and populates that OK in the padding-top: value.

However, the padding-bottom: value calculates as 0.

Any idea where I'm going wrong?

Initially I wondered if it was because I was using a sass variable, but if that was the problem I would have expected --padding-top: to fail.... but it doesn't.

I notice that if I DON'T add a px value to the font-size, and place the font-size AFTER the CSS variable, then I do get a value returned (albeit, the wrong number for my needs):

--padding-bottom: calc(var(--padding-top)/21); = 0.3333333

However, if I try to swap the order around to give me the right calculation, I get 0: --padding-bottom: calc(21/var(--padding-top));

I know I still have a lot to learn, but I'm hoping someone can pls help steer me in the right direction!

Thanks

Answer 1

Nested calcs are possible (https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc()_with_CSS_Variables) but your calculation is taking a px unit and dividing it by a px unit which is an invalid operation, the second parameter when using calc and dividing must be numerical. The same can be said for when using the multiplication operator, eg you can't use 10px * 10px, but could do 10 * 10px or 10px * 10 . So I would say looking at your use case, you might be better off with two ScSS / Sass variables.

See the example on this pen: https://codepen.io/ypoulakas/pen/rQXyZr

$h2fontsize: 21;

$paddingTop: $h2fontsize / 3;

$paddingBottom: $h2fontsize / $paddingTop;

body {
--padding-top: #{$paddingTop}px;  
--padding-bottom: #{$paddingBottom}px;
--margin-top: calc( var( --padding-top ) * 4 );
--margin-left: calc( ( var( --margin-top ) ) / 2 ) ;
  background-color: pink;
}

.test {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  background-color:red;
  margin-top: var(--margin-top);
  margin-left: var(--margin-left);
}

The two Sass variables are used to control the padding top and bottom based on the h2 font size variable. Looking at your formula though the bottom padding will always be 3 .

As an extended part of your example I set the top and let margins based on css variables rather than Sass ones. If you see the left margin is set as calc (200px / 10px) the margin isn't set but if you remove the px on the 10, the left margin will be set properly.