Как вы прописываете media queries в sass?

Question

[Testing Tester]

Добрый день

Какой вариант использования media queries будет более правильным:

.selector {
  @media (width1) {}
  @media (width2) {}
}

либо

.selector { 
}
@media (width1) {.selector {}}
@media (width2) {.selector {}}

?

Или все зависит от удобства и привычки и конкретных правил нет?

Comments

[dpismenny]

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

[Ankhena]

Мне второй удобнее.

Answer 1

[zooks]

Второй правильный.
А первый удобный, но потом нужно прогнать через gulp-combine-mq.
Также не забывайте про breakpoint-sass.com

Comments

[Testing Tester]

Спасибо
Да, через gulp-combine-mq потом само собой.
Только вот на breakpoint-sass.com не понял особо ничего, но есть статьи по этой теме.
И все же, в пользу чего лучше сделать выбор, удобства или правильности?

Я всегда пользовался вторым вариантом, но привычно не всегда есть хорошо. Я и препроцессорами не пользовался, однако сейчас не могу без них, вот и с media думаю может быть подобная ситуация

[zooks]

Правильно когда в итоговых стилях media сгруппированы вместе. Добиться можно двумя способами, которые описал выше.

Answer 2

[Андрей Гончаров]

мне больше нравится прям в селекторе писать, сразу видно как элемент модифицируется, и писать меньше.

Answer 3

[Егор Живагин]

ИМХО, гораздо читабельнее выглядит этот вариант, особенно когда там много стилей -

@media (max-width: 1) {
  .selector1{
///стили
  }
}

Правил, конечно, нет

Answer 4

[andead]

Обычно пишу так:

.module {
  font-size: 12px;
  .module-element {
    font-size: 11px;
  }

  @media (...) {
    font-size: 14px;
    .module-element {
      font-size: 12px;
    }
  }
}