Почему не работает SCSS так, как ожидается?

Question

[sorry_i_noob]

Здравствуйте. Есть такой код:
https://jsfiddle.net/13j9waz2/
Ширина item должна быть 50px, так как окно браузера явно шире, чем 20px. Но почему-то ширина item равна 100px - как будто окно браузера уже или равно 20px. Почему так?

Answer 1

[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;
   }
  }