'Is it possible to define and overwrite Sass/SCSS variables based on conditions

I have an I have a _overrides.scss file in which I want to provide a global variable based on conditions.

The variable should be true if my navigation with the .side-navigation class also contains the .-open class. If it contains the -closed class, the variable should have the value false.

Something like this:

$navbarOpen: false;

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

I want to use the variable within another SCSS module in React, like:

@import 'overrides';

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

The variable is recognized, but the value is always false since it doesn't seem to be overridden by the condition set in _overrides.scss.

cssreactjssassscss-mixins


Solution 1:[1]

I think that the problem is that Sass variables can't be changed in the runtime, it'll be compiled to plain CSS and all vars will be replaced. Although as I see your condition depends on runtime events.

Check this for references: Dynamic Sass Variables

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Seredenko

Related Questions