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

Posted 2023-03-06

【中文标题】全局 scss 变量未按预期运行 [重复]

【英文标题】：Global scss variables not behaving as expected [duplicate]

【发布时间】：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。

啊，好吧，这就解释了。只有在发布这个问题之后才想到它可能与媒体查询有关，因此我的编辑哈哈。无论如何谢谢:)

【参考方案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);

【讨论】：

这可行，但在本例中变量不是全局变量。

嗨@DSteman，我已经更新了答案，请检查。

这并不能解释观察到的行为。