css calc with calculated variables

Question

i'm working on a project where the main content is calculated as:

$content-height: calc(100vh - 50px - 62px);

inside the content I have a table which height is calculated as:

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

in Chrome the output is:

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

and it works fine.

in Internet explorer (11) this doesn't work. when i remove the inner calc like:
height: calc((100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);

it works fine.

iv'e searched the web for answers for this topic but found none. any help would be appreciated

You can't have a calc inside a calc like that ... the inner calc word needs to go. Why it works in Chrome I can't say though the specs says no — Asons
In general, it is possible to lay things out as you want them without doing this type of manual calculation. If you show more of your HTML, perhaps people could comment as to how. — user663031

Sphinxxx Sphinxxx · Accepted Answer · 2016-12-28T01:43:34

Apparently, this should have worked (https://stackoverflow.com/a/36414853/1869660), but since it doesn't, you can make a SASS function to help creating valid calc expressions:

//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 + ")");
}

Usage:

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

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

Example: http://codepen.io/Sphinxxxx/pen/NbZLqd?editors=0100

css calc with calculated variables

1 Answers