是否可以根据条件定义和覆盖 Sass/SCSS 变量答案

【问题标题】：Is it possible to define and overwrite Sass/SCSS variables based on conditions是否可以根据条件定义和覆盖 Sass/SCSS 变量
【发布时间】：2022-02-04 02:28:17
【问题描述】：

我有一个_overrides.scss 文件，我想在其中根据条件提供一个全局变量。

如果我使用.side-navigation 类的导航还包含.-open 类，则该变量应为true。如果它包含-closed 类，则该变量的值应为false。

类似这样的：

$navbarOpen: false;

.side-navigation {
  &.-open {
    $navbarOpen: true;
  }
  &.-closed {
    $navbarOpen: false;
  }
}

我想在 React 的另一个 SCSS 模块中使用该变量，例如：

@import 'overrides';

@if $navbarOpen == true {
  footer {
    background: red;
  }
}

变量已被识别，但值始终为false，因为它似乎没有被_overrides.scss 中设置的条件覆盖。

【问题讨论】：

stackoverflow.com/questions/19039622/…
感谢您的链接，但如何将其应用于我的用例？

标签： css reactjs sass scss-mixins

【解决方案1】：

我认为问题在于 Sass 变量不能在运行时更改，它将被编译为纯 CSS，并且所有 var 都将被替换。虽然我看到你的情况取决于运行时事件。

检查此以获取参考：Dynamic Sass Variables

【讨论】：