SASS: медиа запросы, вложенные друг в друга?

Question

[thehighhomie]

Подскажите пожалуйста, в sass несколько медиа запросов к 1 селектору можно писать только таким образом?:

.text {
    @media screen and (max-width: 1500px) {
        font-size: 16px;
    }

    @media screen and (max-width: 1320px) {
        font-size: 13px;
    }
}

или еще можно как-нибудь по удобнее? типа

.text {
    @media screen and (max-width: 1500px) {
        font-size: 16px;

        @media screen and (max-width: 1320px) {
            font-size: 13px;
        }
    }
}

Comments

[ой всё]

и в чем тут состоит удобство?

[thehighhomie]

ой всё, я пример привел, потому-что у меня не получалось ни как к примеру просто блок со скобками или media, как нибудь сокращенно

[ой всё]

thehighhomie, так а в чем состоит логика такого запроса?

[Сергей delphinpro]

Писать вложенные можно. Но не нужно. SASS их не оптимизирует. На выходе много лишнего кода.
Возможно какой-нибудь combine-mq (или ему подобные плагины) разрулит такую кашу, надо проверить.

[thehighhomie]

Сергей, значит так вполне нормально писать?:

.text {
    @media screen and (max-width: 1500px) {
        font-size: 16px;
    }

    @media screen and (max-width: 1320px) {
        font-size: 13px;
    }
}

все так пишут?

[Сергей delphinpro]

thehighhomie, да

[Сергей delphinpro]

thehighhomie, вложенные можно писать несложные

например

@media (min-width: 100px) {
  @media (max-width: 200px) {
    //...
  }
}

Такой код нормально скомпилится

[Сергей delphinpro]

thehighhomie, в свою очередь это

@media (min-width: 100px) {
  @media (min-width: 200px) {
    //...
  }
}

превратится в это

@media (min-width: 100px) and (min-width: 200px) {
    //...
}

И здесь явно виден лишний код.

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

[thehighhomie]

Сергей, спасибо)

[thehighhomie]

Сергей, вы бы создали ответ, чтобы я отметил как решение