Как вкладывать переменные calc в другие переменные calc в Sass?

Question

Как связать переменную со значением calc в другой переменной?

Что я делаю:

$height:                25px;
$size:                  calc(#{$height} - 10px);
$margin:                calc(#{$radiosize} /4);
$padding:               calc(#{$radiosize} *2);

Что просходит:

$height:                25px;
$size:                  15px;
$margin:                /*does not work*/;
$padding:               /*does not work*/;

CodePen Demo

Answer 1

Вы не можете вложить calc() функция внутри другого calc().

Текущий скомпилированный CSS:

margin: calc(calc(25px - 10px) /4); /* Incorrect syntax */
padding: calc(calc(25px - 10px) *2); /* Incorrect syntax */

Решение:

Рассчитать размер переменной напрямую.

$size: $height - 10px;

Forked Codepen

Answer 2

В вашем случае, учитывая кодекс, который вы указали в комментариях, вам не нужно использовать calc(), Как правило, используйте calc() когда вы хотите смешать единицы, например, вычитая px значение из %,

Кажется, что вы манипулируете px значения либо (1) с другими px или (2) с номерами без единиц измерения, поэтому нет необходимости использовать calc():

$height:                25px;
$size:                  $height - 10px;
$margin:                $size / 4;
$padding:               $size * 2;

Вот кодекс: https://codepen.io/imoskvin/pen/gXdMgR

---

Тем не менее, чтобы ответить на ваш актуальный вопрос: теперь вы можете вкладывать calc() внутри другого calc() "S!

Кажется, это было первоначальное намерение, и спецификация была обновлена ​​соответственно. Браузеры догоняют: ваш оригинальный Codepen теперь работает так, как задумано в Chrome и Firefox.

Для получения более подробной информации смотрите этот ответ от одного из редакторов спецификаций.

Answer 3

На самом деле, есть возможность отправить calc() в другой calc(). К сожалению с небольшим взломом:

$var1: 3px;
$var2: 5px;

$innerCalc: '(#{$var1} + #{$var2})';
$actualCalc: calc(#{$innerCalc} / 2); //4px

Это сделает свое дело. Он просто помещает все (включая скобки) в ваш calc, но все еще способен разрешать переменные. Наслаждаться.:)

PS НИКОГДА не забывайте пробелы до и после каждого оператора!