Я пытаюсь использовать calc()
функцию в таблице стилей Sass, но у меня есть некоторые проблемы. Вот мой код:
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
Если я использую литерал 50px
вместо своей body_padding
переменной, я получаю именно то, что хочу. Однако, когда я переключаюсь на переменную, это вывод:
body {
padding-top: 50px;
height: calc(100% - $body_padding); }
Как я могу заставить Sass признать, что ему нужно заменить переменную внутри calc
функции?
Ответы:
Интерполировать :
Для этого случая также будет достаточно границы :
источник
box-sizing: border-box;
было бы идеальным способом пойти, на мой взгляд, конечно. В общем, модель для определения размеров коробки должна составить тcalc(100% - var(--body_padding))
Чтобы использовать
$variables
внутри вашегоcalc()
свойства высоты:HTML:
SCSS:
источник
Хотя это не имеет прямого отношения. Но я обнаружил, что код CALC не будет работать, если вы не поставите пробелы правильно.
Так что это не сработало для меня
calc(#{$a}+7px)
Но это сработало
calc(#{$a} + 7px)
Мне понадобилось время, чтобы понять это.
источник
Я попробовал это, тогда я исправил свою проблему. Он автоматически вычислит все контрольные точки медиа по заданной скорости (base-size / rate-size)
источник
Вот действительно простое решение с использованием SASS / SCSS и стиля математической формулы:
В заключение, я настоятельно рекомендую , чтобы вы поняли
transform-origin
,rotate()
иskew()
:https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
источник
Вы можете использовать свой словесный
#{your verbal}
источник
variable
но учитывая, что ОП знает, что такое переменная (они указывают$body_padding
в своем коде), что добавляет ваш ответ?Попробуй это:
источник