How to change the value of a variable from another file?

Question

Sass

I made the landing page, it remains to make media queries. Created variables with font sizes in variables.scss ($font-h1). In the file media.scss I tried to change the value of $font-h1 - nothing has changed.

The structure is the following. There is a style.scss in it:

@import "variables.scss";
// между ними еще несколько файлов (header.scss, footer.scss и т.д.)
@import "media.scss";

I learned that you can only access a variable from one file, so I tried to import media.scss inside variables.scss , then I tried the other way around, then I danced with a tambourine, googled the properties !defaul t, !global , tried to substitute them for the variable, but there was no effect, then I tried to play with " _ " in front of file names... What should be the conditions to be able to change a variable from another file?

Answer 1

What have you tried?
Like this:

$h1: 30px;

h1 { font-size: $h1; }

@media(){
  $h1: 20px;
}

So it doesn't work.
Define multiple variables

$h1: 30px;
$h1-sm: 20px;

h1 { font-size: $h1; }

@media(){
  h1 { font-size: $h1-sm; }
}

Or use custom properties, they are also css variables:

:root {
  --h1: 30px;
}

h1 {  font-size: var(--h1, 30px); }

@media(){
  :root {
    --h1: 20px;
  }
}