如何修复Dart sass中未定义的操作?

Question

我想在bulma中设置一些变量。使用dart sass(1.45.1与dart2js 2.15.1编译)会导致"未定义操作"错误

Error: Undefined operation "min(1216px, 100vw) - 64px".
╷
20 │       max-width: min($widescreen, $container-max-width) - $container-offset

bulma源包含在主sass文件

@use 'menu-large'
@use 'hero'

@import "../../../../libraries/node_modules/bulma/bulma.sass"

为什么'min'出错?

Answer 1

min()函数返回一个px值，您的值与减法不兼容。不能减去px以外的其他单位。

您可以将$container-offset的值转换为:

$offset-in-px: $container-offset / ($widescreen / 100);
max-width: min($widescreen, $container-max-width) - $offset-in-px * 1px;

Answer 2

设置为px单位而不是使用vw:

$container-max-width: 1400px

改变bulma框架是不可取的。MIN() MAX()不能自动换行"#{1200px}"