Почему не работает @import внутри media query?

Добрый день.
Такая конструкция не работает.
В начале CSS вы уже объявили правило "@media", а после него хотите сделать "@import"

@import не разрешается прописывать после любых объявлений кроме @charset или другого @import.
То есть, чтобы @import работал, он должен быть в самом начале CSS списка или файла.

Пруфлинк: www.w3.org/TR/CSS21/cascade.html#at-import (any @import rules must precede all other rules (except the @charset rule, if present), то же на русском: htmlbook.ru/css/import

Как-то так.

Ох, жаль.
Это весьма неудобно.
Кстати, mediaquery для линеек ipad-iphone

/*DESKTOP дохуя×дохуя*/
@media all and (min-device-width: 1025px){
  body:before{
    content:"Desktop";
    }
  }

/*IPAD 1 1024×768*/
@media all and (max-device-width:1024px) and (min-device-width:481px) and (orientation:landscape){
  .ipad:before{
    content:"IPad landscape";
    }
  }

@media all and (max-device-width:768px) and (min-device-width:321px) and (orientation:portrait){
  .ipad:after{
    content:"IPad portrait";
    }
  }
  
/*IPHONE RETINA 640 × 960*/

@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:480px) and (orientation:landscape){  
  .iphone-retina:before{
    content:"IPhone Retina landscape";
    }
  }

@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:320px) and (orientation:portrait){
  .iphone-retina:after{
    content:"IPhone Retina portrait";
    }
  }

/*IPHONE TFT 320 × 480*/

@media all and (max-device-width:480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:landscape){
  .iphone-tft:before{
    content:"IPhone TFT landscape";
    }
  }

@media all and (max-device-width:320px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:portrait){
  .iphone-tft:after{
    content:"IPhone TFT portrait";
    }
  }