Why doesn't SCSS work as expected?

Question

Sass

Hello. There is this code:
https://jsfiddle.net/13j9waz2/
The width of item should be 50px since the browser window is obviously wider than 20px. But for some reason the width of item is 100px - as if the browser window is narrower or equal to 20px. Why is that?

Answer 1

The browser does not understand SCSS. Ultimately, your SCSS code is "converted" to CSS that doesn't have the same variables as SCSS.
Here's what your code generates and it will be applied to the page:
The variable was simply overwritten and that's it. There is no logic and cannot be, since SCSS does not work in the browser. This way won't work.
How to decide?

.item {
    $value_1: 50px;
    @media only screen and (max-width: 200px) {
       width: 100px;
    }
    
    width: $value_1;
    height: 50px;
    background-color: red;
}

2. CSS Variables (look at CanIUse for support ) - if you like it, you can use it.
They are part of CSS, and therefore allow you to organize more complex logic.

.item {
    --value-1: 50px;
   
    width: var(--value-1);
    height: 50px;
    background-color: red;
}

 @media only screen and (max-width: 200px) {
   .item {
      --value-1: 100px;
   }
  }