CSS известково с расчетными переменными

Question

Я работаю над проектом, где основное содержание рассчитывается как:

$ высоты содержимого: известково (100vh - 50px - 62px);

внутри содержимого У меня есть таблица, в которой высота рассчитывается как:

height: calc(#{$content-height} - 62px - 50px/2 - 66.1px);

в Chrome выход:

height: calc(calc(100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);

и она отлично работает.

в Internet Explorer (11) это не работает. , когда я удалить внутреннюю calc как:
height: calc((100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);

он работает отлично.

iv'e искал в Интернете ответы на эту тему, но не нашел ни одного. любая помощь будет оценена

Answer 1

По-видимому, это должен работал (https://stackoverflow.com/a/36414853/1869660), но так как это не так, вы можете сделать функцию SASS, чтобы помочь создать действительные calc выражения:

//https://css-tricks.com/snippets/sass/str-replace-function/ 
@function str-replace($string, $search, $replace: '') { 
    $index: str-index($string, $search); 
    @if $index { 
     @return 
      str-slice($string, 1, $index - 1) + 
      $replace + 
      //Recursively replace the rest of the string: 
      str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 
    } 
    @return $string; 
} 

@function calced($expressions...) { 
    $result: ""; 
    @each $x in $expressions { 
     @if (str-length($result) > 0) { 
      $result: $result + " + "; 
     } 
     $result: $result + str-replace(#{$x}, "calc", ""); 
    } 
    $result: str-replace($result, "+ -", "- "); 
    @return unquote("calc(" + $result + ")"); 
} 

Использование :

$content-height: calc(100vh - 50px - 62px); 
//..or $content-height: calced(100vh ,-50px ,-62px); 

.test { 
    height: calced($content-height/2, -60px, 20%, "-20vh/3"); 
} 

Пример: http://codepen.io/Sphinxxxx/pen/NbZLqd?editors=0100