全局 scss 变量未按预期运行 [重复]答案

【问题标题】：Global scss variables not behaving as expected [duplicate]全局 scss 变量未按预期运行 [重复]
【发布时间】：2021-12-09 08:39:41
【问题描述】：

我在 index.scss 中有一个我 @import "./global-style/scss-variables"; 的 scss 文件，内容如下：

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

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

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

我不确定为什么 sass 中的变量会这样。可能是因为变量可能不会在媒体查询中使用？

【问题讨论】：

CSS 变量在运行时解析，SCSS 变量在编译时解析，SCSS #{...} 中的字符串插值在编译时解析（所有 SCSS 都是编译时）。那么#{var(--spacing)} 产生了什么？简单的。插入calc( __here__ * 2 ) 的字符串var(--spacing) 将在运行时工作。但是不支持您的第二个用例，请参阅此question and the first answer。
啊，好吧，这就解释了。只有在发布这个问题之后才想到它可能与媒体查询有关，因此我的编辑哈哈。无论如何谢谢:)

标签： sass

【解决方案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);
}

【讨论】：