Использование CSS-переменных с Calc() не работает, когда второй параметр

Question

Я новичок в использовании CSS-переменных с calc(), так что извините, если это очевидно, но я пытаюсь выполнить следующие вычисления и не могу понять, почему это не работает:

$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);

Первая часть рассчитывает ОК (т.е. --padding-top: calc(#{$h2-font-size}/3);) правильно получается 7 и заселяет что ж в padding-top: значение.

Тем не менее padding-bottom: значение рассчитывается как 0,

Есть идеи, где я иду не так?

Сначала я задавался вопросом, было ли это потому, что я использовал sass переменная, но если бы это была проблема, я бы ожидал --padding-top: потерпеть неудачу.... но это не так.

Я заметил, что если я НЕ добавляю значение px в размер шрифта и помещаю размер шрифта ПОСЛЕ переменной CSS, то я получаю возвращаемое значение (хотя и неправильное число для моих нужд):

--padding-bottom: calc(var(--padding-top)/21); = 0,3333333

Однако, если я попытаюсь поменять порядок, чтобы дать мне правильный расчет, я получу 0: --padding-bottom: calc(21/var(--padding-top));

Я знаю, что мне еще нужно многому научиться, но я надеюсь, что кто-нибудь сможет помочь мне в правильном направлении!

Спасибо

Answer 1

Возможны вложенные вызовы ( https://developer.mozilla.org/en-US/docs/Web/CSS/calc), но в ваших вычислениях используется единица px и ее деление на единицу px, которая является недопустимая операция, второй параметр при использовании расчета и деления должен быть числовым. То же самое можно сказать и при использовании оператора умножения, например, вы не можете использовать 10px * 10px, но можете сделать 10 * 10px или 10px * 10 . Поэтому я бы сказал, что, посмотрев на ваш вариант использования, вам лучше использовать две переменные ScSS / Sass.

Посмотрите пример на этой ручке: 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);
}

Две переменные Sass используются для управления верхним и нижним отступом на основе переменной размера шрифта h2. Глядя на вашу формулу, хотя нижний отступ всегда будет равен 3 .

В качестве расширенной части вашего примера я установил верх и оставил поля на основе переменных CSS, а не Sass. Если вы видите, что левое поле установлено как calc (200px / 10px), поле не будет установлено, но если вы удалите px на 10, левое поле будет установлено правильно.