Как правильно писать медиа запросы в классах SCSS?

Question

[Evgeniy]

Привет всем!
Подскажите пожалуйста как правильно прописать несколько медиа-запросов для разных экранов?

Например (вот так работает):

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

А вот так уже нет:

&: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%;
         }
    }

Разрешение 767рх уже не видит

Как нужно вкладывать медиа в классы?

Comments

[Михаил]

правильно всё

[WapSter]

Смотри ошибки в PostCss плагинах, видимо они переставляют местами некоторые правила.

[golentor]

Неправильно ничего. Изначально. Никто так непишет давно.

&:after {
        content: "";
        position: absolute;
      ...
    }
    @media (max-width:1199px) {
      &:after
        left: 55%
        width: 45%
     }
     @include mq($from: mobile, $until: tablet) {
       &:after
          left: 75%
          top: 47%
          width: 25%
    }

Неблагодарите.

[profesor08]

golentor,

Неправильно ничего. Изначально. Никто так непишет давно.

хаха

А когда стили одного элемента размазываются по множеству мест, то два раза хаха

[golentor]

profesor08, будете смеяться уважаемый Професор, когда будете реффакторить его код, длиной в тысячу строк) Все медиа-запросы по тем примерам что я видел должны подключаться отдельно, чтобы мухи небыли в котлетах)
В общем дело Ваше, но если посмотреть на код я привёл пример кода на sass с модулем sass-mq и никто этого незаметил)

[profesor08]

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

[profesor08]

golentor, к тому-же я не разделяю стили на десктоп/мобайл, у меня это одно целое. А число строк в файле отражается лишь на производительности редактора.

Answer 1

[profesor08]

Все у тебя верно описано, https://jsfiddle.net/a50yrgwj/

Смотри какие у тебя плагины для обработки css, можно что-то там сортирует, переставляет и тд.