css calc с вычисленными переменными

Question

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

$ content-height: calc (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);

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

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

Answer 1

По-видимому, это должно было сработать ( /questions/33045217/funktsiya-calc-vnutri-drugogo-calc-v-css/33045234#33045234), но, поскольку это не так, вы можете сделать функцию 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