How do you write media queries in sass?

Question

css

Good afternoon
Which use case of media queries would be more correct:

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

or

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

?
Or does it all depend on convenience and habit and there are no specific rules?

Answer 1

The second one is correct.
And the first one is convenient, but then you need to run it through gulp-combine-mq .
Also don't forget about breakpoint-sass.com

Answer 2

I prefer to write directly in the selector, you can immediately see how the element is being modified, and write less.

Answer 3

IMHO, this option looks much more readable, especially when there are a lot of styles -

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

Of course there are no rules.

Answer 4

I usually write like this:

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

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