Variable change based on screen width?

Question

Sass

How can I change the value of a variable depending on the screen width?
I'm trying to do it like this:

@media (min-width: 767px) {
  $size: 1vmax;
}

@media (max-width: 767px) {
  $size: 1.5vmax;
}

h2 {
   font-size: $size;
}

But a compilation error is thrown, saying the variable is undefined.

Answer 1

in your case, add the !global flag:
$size: 1vmax !global;

Answer 2

I was helped by assigning a CSS ID to the element and then I accessed the properties of the variable through Java Script:<div id="7888">

<script>			
const mq = window.matchMedia('(max-width: 570px)');
if (mq.matches) {
    // ширина окна меньше, чем 570px
  document.getElementById("7888").style.height = "500px";
} else {
    // ширина окна больше, чем 570px
   document.getElementById("7888").style.height = "900px";
}			
       </script>

In this example, I changed the Height CSS property. It seemed to me important to prescribe Java Script, after the code with assigning an ID, otherwise I didn’t find an ID.