需求:
定义一个宽度的变量,好统一修改,但是编译之后,变成了 invalid value ——— calc(100% - $width),原样输出了。
<style lang="scss" scoped>
$width: 500px;
.list {
width: calc(100% - $width); // 期望编译成 calc(100% - 500px)
}
</style>
解决:
用插入值的表达式,格式:#{$width}
<style lang="scss" scoped>
$width: 500px;
.list {
width: calc(100% - #{$width}); // 结果 calc(100% - 500px)
}
</style>