Media queries, sass nesting?

Question

css

I can't deal with sass media queries
There is a conditional html construct

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

In sass I write like this

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

1) please help me figure out the correct nesting, which blocks should be put into which blocks, and which ones should not. I can't find it in detail in the Internet
2) it is necessary to write @mediafor let's say the final block - .div_3. In a separate dock, I write as if by referring to it, and it does not work
. And then I realized that the final css for it looks like this -

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

I'm not going to write all this gut in media queries, So in general it will come out to hell
. And if you just write inside .div_3, it's also strange. You need a lot of blocks for me under the adaptive and if you write in each separate request, then in the end there will be many css requests inside which there will be only one selector
Krch I got confused. Please, explain how it is necessary to do all this beautifully in sass. With appearance, what, where, how correctly and according to@media

Answer 1

1) please help me figure out the correct nesting

Use nesting only in rare cases or not use it at all, use any methodology in the ru segment is dominated by BEM.
You may find that there is a selector like .div_1 somewhere. .div_2 .div_3 will override your .div_3. scss has a convenient way to write media queries

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

By combining mixin variables and adding editor autocomplete, you can achieve high speed writing such structures by adding a assembler with css cleanup plugins that combine blocks with the same media queries. For example this