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

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

0 голосов
/ 06 декабря 2018

Я новичок в использовании 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));

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

Спасибо

1 Ответ

0 голосов
/ 06 декабря 2018

Возможны вложенные расчеты (https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc()_with_CSS_Variables), но ваши вычисления берут единицу px и делят ее на единицу px, которая является недопустимой операцией, второй параметр при использовании calc и деления должен быть числовым.скажем, при использовании оператора умножения, например, вы не можете использовать 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, левое поле будет установлено правильно.

...