1. 程式人生 > >解決在sass中使用calc不能包含變量的問題。

解決在sass中使用calc不能包含變量的問題。

分享 hub spl 一個 inner 沒有 找到 images 插值方法

今天寫sass的時候,發現在sass中使用calc,如果calc中包含一個變量,不會產生效果,看代碼:

.app-inner {
    display: flex;
    height: calc(100% - $topbar-height);
}

在瀏覽器中沒有產生效果:

技術分享

可以看到sass並沒有解析這個$topbar-height。

最後在github的issue中找到了方法,要想在sass的calc中使用變量,必須對這個變量使用sass的插值方法(#{$variable})。

所以把代碼改正下面的形式就可以了:

.app-inner {
    display: flex;
    height
: calc(100% - #{$topbar-height}); }

在瀏覽器中可以看到這個變量被解析了:

技術分享

issue地址: https://github.com/sass/sass/issues/2166#issuecomment-254511098

解決在sass中使用calc不能包含變量的問題。