CSS计算与计算的变量

问题描述：

我工作的一个项目，主要内容是计算公式为：CSS计算与计算的变量

$内容的高度：理论值（100vh - 50像素 - 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在网上搜索了该主题的答案，但没有找到答案。任何帮助，将不胜感激

哟你不能在这样的calc里面有一个calc ......内部的_calc_单词需要去。为什么它可以在Chrome中运行我不能说，虽然规格说不是 – LGSon

一般来说，可以根据需要放置它们，而无需执行这种类型的手动计算。如果你展示更多的HTML，也许人们可以评论如何。 – 2016-12-28 03:38:17

答

显然，这应该工作过（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

CSS计算与计算的变量

相关推荐