What is the correct way to write media queries in SCSS classes?

Question

css

Hi all!
Can you please tell me how to write multiple media queries for different screens?

For example (this is how it works):

&:after {
        content: "";
        position: absolute;
        left: 32%;
        display: block;
        top: 53%;
        width: 720px;
        height: 2px;
        background: #fff;
        @media (max-width:1199px) {
            left: 55%;
            width: 45%;
        }
    }

And now it's gone:

&:after {
        content: "";
        position: absolute;
        left: 32%;
        display: block;
        top: 53%;
        width: 720px;
        height: 2px;
        background: #fff;
        @media (max-width:1199px) {
            left: 55%;
            width: 45%;
        }
        @media (max-width:767px) {
             left: 75%;
             top: 47%;
             width: 25%;
         }
    }

767px resolution no longer sees

How do I put media in classes?

Answer 1

Everything is correctly described for you, https://jsfiddle.net/a50yrgwj/
See what plugins you have for processing css, you can sort, rearrange, and so on.