Использование переменных CSS с Calc () не работает при втором параметре
Я новичок в использовании переменных 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 к font-size и помещаю font-size ПОСЛЕ переменной CSS, я получаю возвращаемое значение (хотя и неправильное число для моих нужд):
--padding-bottom: calc(var(--padding-top)/21); = 0,3333333
Однако, если я попытаюсь поменять местами порядок, чтобы получить правильный расчет, я получу 0:
--padding-bottom: calc(21/var(--padding-top));
Я знаю, что мне еще многому нужно научиться, но я надеюсь, что кто-то может помочь мне направить в правильном направлении!
Спасибо
calc(#{$a} - #{$b}); будет работать?
Ответы 1
Вложенные вычисления возможны (https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc()_with_CSS_Variables), но ваше вычисление берет единицу пикселя и делит ее на единицу пикселя, что является недопустимой операцией, второй параметр при использовании вычисления и деления должен быть числовым. То же самое можно сказать и об использовании оператора умножения, например, вы не можете использовать 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 (200 пикселей / 10 пикселей), поле не установлено, но если вы удалите пиксель на 10, левое поле будет установлено правильно.
Да, я согласен, я пытался объяснить контекст, почему операция может быть запрещена. Обновим ответ вашим отзывом.
@Kessa, пожалуйста, отметьте вопрос как ответ, если он вам в конце концов помог :)
Оставив комментарий на случай, если кто-то придет сюда по той же проблеме, что и я (заголовок все еще применяется), я установил
--my-var: 0, чтобы изменить значение позже через JS. Затем я попытался вычесть это:calc(-100px - var(--my-var)), но в этом случае явно требуется модуль--my-var: 0px.