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, Dec 27 '16 at 23:53
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. — , Dec 28 '16 at 03:38

score 0 · Answer 1 · edited May 23 '17 at 10:30

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 Answers1