Я пытаюсь использовать функцию 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
?
Интерполяция:
body
height: calc(100% - #{$body_padding})
Для этого случая также будет border-box:
body
box-sizing: border-box
height: 100%
padding-top: $body_padding
box-sizing: border-box;
было бы идеальным способом пойти, на мой взгляд, конечно. В общем, модель размеров коробки должна составлять
Попробуйте следующее:
$body_padding: 50px
body
padding-top: $body_padding
height: #{100vh - $body_padding}
100vh, сделайте элемент полной высотой окна просмотра
Попробуйте следующее:
@mixin heightBox($body_padding){
height: calc(100% - $body_padding);
}
body{
@include heightBox(100% - 25%);
box-sizing: border-box
padding:10px;
}