全局scss变量的行为不符合预期

Question

我有一个scss文件，我在索引@import "./global-style/scss-variables";。Scss，内容如下:

:root {
--spacing: 8px;
--iphonewidth: 375px;
}

当我在一个组件的scss中调用变量时，如margin-bottom: calc(#{var(--spacing)} * 2);，在var(--spacing)占位符中插入8px。然而，var(--iphonewidth)不是预期的375px，在这里使用:

@media screen and (max-width: var(--iphonewidth)) {
....
}

我不确定为什么变量在sass表现出这种方式。也许是因为变量可能不会在媒体查询中使用?

Answer 1

SCSS:

$spacing: 8px;
$iphonewidth: 375px;

.selector {
margin-bottom: calc( #{$spacing * 2} );
}

CSS:

:root {
--spacing: 8px;
--iphonewidth: 375px;
}
.selector {
margin-bottom: calc(var(--spacing) * 2);
}