FabiBoom

Браузер не понимает SCSS. В конечном итоге ваш SCSS код "конвертируется" в CSS, в котором нет таких переменных как в SCSS.

Вот что генерирует ваш код и он же будет применен к странице:


Переменная просто перезаписалась и все. Никакой логики нет и быть не может, так как SCSS не работает в браузере. Такой способ не сработает.

Как решить?

1. SCSS

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

2. CSS Variables (поддержку посмотреть на CanIUse) - если устраивает, то можете использовать.
Они - часть СSS, а поэтому позволяют организовать более сложную логику.

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

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