Переменная Sass в функции CSS calc ()

Question

Переменная Sass в функции CSS calc ()

630

Я пытаюсь использовать функцию 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?

GJK 31 июль 2013, в 21:43

Источник

9

возможный дубликат переменной США в миксине
cimmanon 31 июль 2013, в 22:36
14

@ user3705055 Вам нужно рассчитать, так как Sass не может рассчитать 100% - 50px, поскольку единицы измерения разные. Это может быть вычислено только браузером, когда он знает, насколько велик контейнер, чтобы преобразовать 100% в px перед добавлением значений. Это точная причина, почему существует Calc.
Mog0 18 июль 2016, в 16:05

Теги:

sass

css

css3

css-calc

3 ответа

-5

Попробуйте следующее:

$body_padding: 50px

body
    padding-top: $body_padding
    height: #{100vh - $body_padding}

100vh, сделайте элемент полной высотой окна просмотра

Rach Glucio 02 авг. 2017, в 13:43

-5

Попробуйте следующее:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}

Mas Hary 21 апр. 2017, в 08:35

2

Как это лучше, чем принятый ответ выше? Кажется, он даже не делает то же самое ...?
Jules 23 июль 2017, в 03:06

Ещё вопросы

возможный дубликат переменной США в миксине
@ user3705055 Вам нужно рассчитать, так как Sass не может рассчитать 100% - 50px, поскольку единицы измерения разные. Это может быть вычислено только браузером, когда он знает, насколько велик контейнер, чтобы преобразовать 100% в px перед добавлением значений. Это точная причина, почему существует Calc.
Как это лучше, чем принятый ответ выше? Кажется, он даже не делает то же самое ...?

sam · Accepted Answer · 2013-11-27T07-58-00.000Z

Интерполяция:

body
    height: calc(100% - #{$body_padding})

Для этого случая также будет border-box:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

Проблема Sass, для справки: github.com/nex3/sass/issues/818
box-sizing: border-box; было бы идеальным способом пойти, на мой взгляд, конечно. В общем, модель размеров коробки должна составлять