Sass, media, breakpoints. Is it normal that there will be a lot of media spread over the file?

Question

css

I want to optimize the adaptation of the site.
Right now my customization .scss file looks like this:

@media (max-width: 1200px) {
  .menu {

    .logo {

    }
  }

  .content {

  }
}

@media (max-width: 992px) {
  .menu {

    .logo {
      
    }
  }

  .content {
    
  }
}

...

It doesn’t suit me that it takes a long time to look for the right class if the project grows.
I found this method on the official website
sass-scss.ru/documentation/pravila_i_direktivi/dir...

.sidebar {
width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

But this will make a lot of media queries throughout the file.
Question:
Will this affect the quality of the code in terms of performance?

.selector {
  color: red; }
  @media (min-width: 767px) {
    .selector {
      color: blue; } }

.selector2 {
  color: red; }
  @media (min-width: 767px) {
    .selector2 {
      color: blue; } }

Answer 1

If the project is large (more than just 5 pages), then you need to build the correct structure in everything. Without it, there will be a big house in the future when something needs to be changed, and dependencies are lying around the entire project. And this applies to both programming languages ​​and, of course, style sheets.
I must say right away that the last option, when there is a class, and it also contains media, which are necessary only for this class, this is a very good option. Since in which case you don’t need to run through the entire code (and if you write in sass, then there will be a lot of files. One file for each component). And so everything is nearby, everything is visible, it’s immediately clear what’s what and it’s easy to make changes.
It won't affect the speed in any way. In any case, the browser will process all the css that you feed it. But the subsequent speed of development will be affected quite strongly.