解决在sass中使用calc不能包含变量的问题

写sass的时候，发现在sass中使用calc包含一个变量，不会产生效果，看代码：

font-size: calc($min-font-size + (2 - 1.4) * ((100vw - $min-screen) / (1200 - 800)));

代码运行效果：

要想在sass的calc中使用变量，必须对这个变量使用sass的插值方法（#{$min-font-size}），代码改成这样：

 font-size: calc(#{$min-font-size} + (2 - 1.4) * ((100vw - #{$min-screen}) / (1200 - 800)));

改后的运行效果：

实现 font-size 响应式的最终代码：

$min-font-size: 1.4rem;
$max-font-size: 1.8rem;
$min-screen: 600px;
$max-screen: 1200px;
$color-basic:red;
$color-midlle:orange;
$color-large:green;

:root {
    font-size: 10px;
}

article {
    font-size: $min-font-size;
    color: $color-basic;
}


@media (min-width: $min-screen) and (max-width: $max-screen) {
    article {
        font-size: calc(#{$min-font-size} + (2 - 1.4) * ((100vw - #{$min-screen}) / (1200 - 600)));
        color: $color-midlle;
    }
}

@media (min-width: $max-screen) {
    article {
        font-size: $max-font-size;
        color: $color-large;
    }
}

就这样，我们就对 font-size 实现了响应式。不用再通过各种屏幕大小的媒体查询来变化了。

注意，calc 函数在计算除法的时候，/ 右边只能是数字，不能带单位。* 要求至少一个参数是数字。

问题解决 ~