今天写sass的时候,发现在sass中使用calc,如果calc中包含一个变量,不会产生效果,看代码:

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

在浏览器中没有产生效果:

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

可以看到sass并没有解析这个$topbar-height。

最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable})。

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

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

在浏览器中可以看到这个变量被解析了:

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

 

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

相关文章:

  • 2022-01-02
  • 2022-12-23
  • 2021-04-15
  • 2021-09-02
  • 2022-12-23
  • 2022-12-23
  • 2021-12-30
  • 2021-09-19
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-21
  • 2021-08-09
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案