Медиа запросы, вложенность sass?

Question

[Игорь Ламп]

Не могу разобраться с медиа-запросами sass

Есть условная html конструкция

<div_1>
  <div_2>
     <div_3>
       .... И так далее 
      </div>
  </div>
</div>

В sass пишу вот так

.div_1 { 
    .div_2{
        .div_3{
          }
     }
}

1) помогите пожалуйста разобраться с правильной вложенностью, какие в какие блоки стоит складывать, а какие в какие нет. В инете подробно не могу найти
2) надо писать @media для допустим конечного блока - .div_3. В отдельном доке пишу как бы обращением к нему и оно не срабатывает
И потом я понял, что итоговый css для него то выглядит так -

@media(){
.div_1 . .div_2 .div_3{
   }
}

Не буду же я всю эту кишку в медиа-запросах писать, Так вообще дохрена выйдет

А если просто внутри .div_3 писать, то тоже странно. Надо много блоков меня под адаптив и если писать в каждом отдельный запрос, то в итоге css будет много запросов внутри которых будет всего по одному селектору

Крч запутался я. Будьте добры, объясните как надо это все красиво делать в sass. С внешностью, чего, куда, как правильно и по @media

Answer 1

[WapSter]

1) помогите пожалуйста разобраться с правильной вложенностью

Использовать вложенность только в редких случаях или вообще ее не использовать, использовать какую либо методологию в ру сегменте доминирует БЭМ.

А если просто внутри .div_3 писать, то тоже странно. Надо много блоков меня под адаптив и если писать в каждом отдельный запрос, то в итоге css будет много запросов внутри которых будет всего по одному селектору

Можешь столкнуться, что в каком либо месте селектор типа .div_1 . .div_2 .div_3 перекроет твой .div_3. В scss есть удобный способ писать медиа запросы

.div_3 {
   color: #000;
   @media screen {
       color: #fff;
   }
}

Совмещая миксины переменные и дополнив автокомплит редактора можно добиться высокой скорости написания подобных конструкций, добавив туда сборщик с плагинами по чистке css, которые объединяют блоки с одинаковыми медиа запросами. Например такой

Comments

[Игорь Ламп]

Подскажи пожалуйста ресурс по бэм понятный, как с ним работать. А то что ни смотрю, воспринимается очень заумно

[WapSter]

Игорь Ламп, https://ru.bem.info/methodology/ https://www.youtube.com/watch?v=SLjHSVwXYq4 https://www.youtube.com/watch?v=lQPs20b3Ey8&vl=ru