less和scss中使用calc问题

记录一个问题：在less中使用calc出现了非预期的编译结果。在上例中，预期的结果是全屏高度减去5像素。但是less之后的结果为95vh。明显是有问题的，在less.js的github上面也找到了类似的问题。less对于calc中的单位处理存在问题。可以理解为将上例中的100vh - 5px 处理成了 100vh - 5vh。注意新添加的~ 和双引号！除了使用上面比较tricky的方法外，还可以

liu__software

334人浏览 · 2023-02-28 11:33:48

liu__software · 2023-02-28 11:33:48 发布

记录一个问题：在less中使用calc出现了非预期的编译结果。
例如：

.box {
	height: calc(100vh - 5px);
}

在上例中，预期的结果是全屏高度减去5像素。但是less之后的结果为95vh。明显是有问题的，在less.js的github上面也找到了类似的问题。less对于calc中的单位处理存在问题。可以理解为将上例中的100vh - 5px 处理成了 100vh - 5vh。这个问题在低版本的less中一直存在，可以通过字符转移进行处理：

.box {
	height: calc(~"100vh - 5px");
}

注意新添加的~ 和双引号！

除了使用上面比较tricky的方法外，还可以通过升版本来解决。在v3.5.0-beta.2版本中作者对此问题进行了修复。如果版本可以兼容的话，可以提高版本来解决此问题。

less项目地址
 解决此问题的推送

scss在calc中插入变量

需求：
定义一个宽度的变量，好统一修改，但是编译之后，变成了 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>

————————————————
版权声明：本文为CSDN博主「呀呀呀雅楠？」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Yana1225/article/details/126161619

————————————————
版权声明：本文为CSDN博主「Apisit-Lee」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sinat_39354363/article/details/125622974