Сергей delphinpro

.block1 {
  text-align: center;
  
  .block2 {
    text-align: left;
  }

  &.boost .block2 {
    color: red; 
  }
}

$select.forEach(item => {
  item.addEventListener('click', function () {
    $select.filter(i => i !== item).each(i => i.classList.remove('_select--opened'));
    this.classList.toggle('_select--opened');
  });
});

UPD

$select.forEach(item => {
  item.addEventListener('click', function () {
-   $select.filter(i => i !== item).each(i => i.classList.remove('_select--opened'));
+   Aray.from($select).filter(i => i !== item).forEach(i => i.classList.remove('_select--opened'));
    this.classList.toggle('_select--opened');
  });
})

А нефиг медиазапросы писать в отдельных файлах. Сто раз уже везде писалось.
Есть у вас файл со стилем для одного блока, вот в нем и пишите всё, что касается этого блока, в том числе, медиазапросы.

Кроме того, в css часто важен порядок стилей, и не только медиазапросов. Поэтому порядок лучше строго регламентировать. В галп подключать один файл - точку входа, например styles.scss. А уже в этом файле, в нужном порядке импортировать остальные файлы.
Второй вариант — немного стрёмный, но рабочий — именовать файлы так, чтобы они при алфавитной сортировке располагались в том порядке, который вам нужен.

Ну или заюзайте combine-mq. Он вам отсортирует все медиа и закинет их в конец файла.

Просто больше пишите HTML кода. Через недельку-другую даже замечать не будете, что вы их полностью пишете.

В phpStorm посмотрите раздел настроек File | Settings | Editor | Live Templates
Там в блоке ZenHTML все сокращения, которые понимает программа. Вы можете добавить свои.
Именно эти варианты шторм подсказывает по ctrl+space.

Что касается тега div — он и так короткий, его нет смысла сокращать.

.button {
  background: red;
  border-color: transparent;
  backgroud-clip: border-box; /* это значение по-умолчанию, можно не указывать, если не меняли */
}

https://developer.mozilla.org/ru/docs/Web/CSS/back...

public function getThumbnail($photo, $type = 'medium')
{
    $p = pathinfo($photo);
    return $p['dirname'].'/'.$type.'-'.$p['basename'];
}


echo getThumbnail('public/users/avatar.webp');         // public/users/medium-avatar.webp
echo getThumbnail('public/users/avatar.webp', 'crop'); // public/users/crop-avatar.webp