Переменная Sass в функции CSS cal c () не работает в IE

Question

У меня есть функция cal c, как показано ниже, но она не работает в IE.

в моей таблице стилей _spacing.s css:

$spacing-unit: 1em
$component-padding: calc(2* #{$spacing-unit});

в my8 layout s css таблица стилей:

.conainer {
   width: calc(100% - (2 * #{$component-padding}));
   max-width: 75rem;
   margin-left:auto;
   margin-right:auto;
}

, когда она компилируется, она компилируется в:

.container {
  calc(100% - 2*calc(2*1em)));
  ...
 }

, что кажется немного странным

Answer 1

Ваша основная проблема в том, что IE не любит анализировать вложенные calc функции . Это не значит, что он вообще не поддерживает его, но вы должны опустить calc в выражении. Таким образом, IE11 не будет уважать calc(100% - 2 * calc(2 * 1em))), но он должен уважать calc(100% - 2 * (2 * 1em))).

В качестве вторичной ноты, в то время как не должен вызывать беспокойство, Есть некоторые операторы, в которых окружающие пробелы имеют значение в выражении calc. По этой причине MDN рекомендует всегда включать пробелы вокруг оператора для согласованности .