Fork me on GitHub

在sass中使用calc包含变量遇到的问题

开工第一天,遇到一个小问题,在这里记录一下

问题描述

今天重构项目写scss的时候,发现如果在 calc 包含变量,那么scss就不会正确的编译,例如下面这样的代码:

1
2
3
4
$bar-height:80px;
.main{
height: calc(100% - $bar-height);
}

sass最后并不会解析calc中的 $bar-height

解决方法

后来王二上网查资料在scss的官方文档里找到了解决方法(第6.7节)

这里需要用到scss的插值语句 #{} (Interpolation: #{}),例如上面的代码可以修改如下:

1
2
3
4
$bar-height:80px;
.main{
height: calc(100% - #{$bar-height});
}

文档中这样说到:‘#{} 插值语句也可以在属性值中插入 SassScript,大多数情况下,这样可能还不如使用变量方便,但是使用 #{} 可以避免 Sass 运行运算表达式,直接编译 CSS。’

-------------本文结束感谢您的阅读-------------