prolem с cal c () в sass (CSS3)

Question

Я пытаюсь использовать функцию calc() в таблице стилей Sass, но у меня возникают некоторые проблемы. Вот мой код:

$gutter-horizontal: 6rem;
    .col-1-of-2{
            width: calc((100% - #{$gutter-horizontal}) /2 );
        }

Если я использую литерал 54rem вместо моей переменной gutter-horizontal, я получаю именно то, что хочу.
В Devtools он указал недопустимое значение свойства:

Где возникает проблема? Здесь - это codepen(line 37) на тот случай, если вы хотите увидеть, где я застрял.

Answer 1

Это потому, что вы должны поставить пробел между + или - оператором, чтобы он работал правильно. И вы даете неожиданный пробел перед )

фиксированный код:

width: calc((100% - #{$gutter-horizontal}) /2);

Из документов MDN:

Примечание. Операторы + и - всегда должны быть окружены пробелами. Например, операнд calc(50% -8px) будет проанализирован как процент, за которым следует отрицательная длина, недопустимое выражение, а операнд calc(50% - 8px) - это процент, за которым следуют знак минус и длина. Более того, calc(8px + -50%) рассматривается как длина, за которой следуют знак плюс и отрицательный процент. Операторы * и / не требуют пробелов, но добавление их для согласованности разрешено и рекомендуется.

Источник: MDN