calc avec des variables css

Question

je travaille calculé sur un projet dont le contenu principal est calculé comme suit:

$ contenu hauteur: calc (100vh - 50px - 62px);

à l'intérieur du contenu I ont une table dont la hauteur est calculée comme suit:

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

dans Chrome la sortie est la suivante:

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

et cela fonctionne très bien.

dans Internet Explorer (11) cela ne fonctionne pas. quand je retire le calc intérieur comme:
height: calc((100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);

il fonctionne très bien.

iv'a cherché sur le web des réponses à ce sujet mais n'en a trouvé aucune. toute aide serait appréciée

Answer 1

Apparemment, ce devrait ont travaillé (https://stackoverflow.com/a/36414853/1869660), mais comme il n'a pas, vous pouvez faire une fonction SASS pour aider la création d'expressions valides 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 + ")"); 
} 

Utilisation :

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

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

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