css - 使用 var() 函数对 SASS 变量求和

Question

var()我需要在另一个使用函数导入它们时添加两个来自 SASS 文件的变量。

我有一个root.module.scss包含以下内容的文件：

:root {
    --app-padding: 16px;
    --header-height: 72px;
}

还有另一个home.module.scss文件，我需要在其中添加上一个:root伪类中定义的变量：

.home {
    padding-top: var(--app-padding) + var(--header-height); // <-- this doesn't work, obviously
}

我也尝试在var()函数中添加变量，但它也不起作用，它给了我一个编译错误：

.home {
    padding-top: var(--app-padding + --header-height);
}

这会连接文本字符串，但不会对定义的值求和。我试图将var()变量转换为带有字符的 SASS 变量，$但这也不起作用。

有什么疯狂的想法我该怎么做？

标签： csssass

Answer 1

我找到了一个解决方案并在这里分享，以防有人需要。

为了使用该函数对导入的变量执行算术运算var()，我们可以使用该calc()函数。例如：

.home {
    padding-top: calc(var(--app-padding) + var(--header-height));
}