用计算变量计算css

时间:2016-12-27 20:12:35

标签: css css3 internet-explorer sass calc

我正在开展一个项目,主要内容计算如下:

  

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

在内容中我有一个表格,其高度计算如下:

File.Copy(@"C:\yourCorrectFilePath\App.Config", @"...\TestProgram\bin\Debug\App.Config", true); Process process = new Process(); process.StartInfo.UseShellExecute = false; process.StartInfo.FileName = @"...\MainProgram.exe"; process.StartInfo.CreateNoWindow = false; process.StartInfo.WorkingDirectory = @"...\TestProgram\bin\Debug"; process.Start();

Chrome中的

输出为:

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

它工作正常。

在Internet Explorer(11)中,这不起作用。 当我删除内部height: calc(calc(100vh - 50px - 62px) - 62px - 50px/2 - 66.1px);时: calc

它工作正常。

我在网上搜索了这个主题的答案,但没有找到。 任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

显然,这个应该有效(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