Сумма SCSS двух блоков rem, сложенных вместе, выводит операцию, а не значение

Question

Я пытаюсь вычесть значение из двух единиц rem в поле scss, однако css выводит операцию вместо значения.Это вообще возможно?

У меня есть значение rem и значение пикселя, которое я использую для преобразования в rem функцию, а затем пытаюсь вычесть сумму их суммированных.Спасибо за некоторую помощь

Answer 1

Основная проблема заключается в интерполяции строки с использованием #{$variable}.

Когда что-то интерполируется в строку, именно так sass-компилятор будет продолжать обрабатывать ее.

Есть несколько вариантов:

1.Оберните вычисление строки с помощью calc() и позвольте браузеру просто добавить два числа.

Ввод:

p { margin-right: calc(#{$size-md} + #{calculateRem($border-md)});

Вывод:

p { margin-right: calc(1.25rem + 0.125rem); }

2.Используйте пользовательскую функцию sass для преобразования строки обратно в числа.

См. https://hugogiraudel.com/2014/01/15/sass-string-to-number/

Ввод:

p { margin-right: (number($size-md) + number(calculateRem($border-md)));

Вывод:

p { margin-right: 1.375rem; }

3.Удалить интерполяцию строк

Ввод:

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem; // removed string interpolation, use * 1rem to convert to rems
}

p { margin-right: ($size-md + calculateRem($border-md)); // removed string interpolation to allow number calculations

Ввод:

p { margin-right: 1.375rem; }

Я думаю, что # 3 - лучший вариант, но это будет зависеть от вашей кодовой базы.