less和scss中使用calc问题

最新推荐文章于 2024-09-26 18:52:35 发布

liu__software

最新推荐文章于 2024-09-26 18:52:35 发布

阅读量462

点赞数

分类专栏： less 文章标签： less scss 前端

原文链接：https://blog.youkuaiyun.com/sinat_39354363/article/details/125622974

版权

less 专栏收录该内容

8 篇文章

订阅专栏

博客记录了less和scss在calc使用中的问题。less在calc中对单位处理有问题，低版本会出现非预期编译结果，可通过字符转移或升级到v3.5.0-beta.2版本解决；scss在calc中插入变量编译后原样输出，可用插入值表达式解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一个问题：在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>

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

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