Запрос медиа-запроса sass по разрешению

Question

Есть ли способ разделить стили sass на основе разрешения медиа-запросов? Вот мой sass file.I хочу разбить его на blue300.css и blue480.css?

.red { 


color: red; 
} 
@media only screen and (max-width: 300px) { 
    .blue { 
    color: red; 
    } 
} 

.blue { 
    color: blue; 
} 

@media only screen and (max-width: 480px) { 
    .blue { 
    margin: 10px; 
    } 
} 

Answer 1

Я думаю, что вы хотите реализовать что-то похожее на подход Jake Арчибальда к созданию отдельного файла Sass для IE.

IE Friendly CSS with Sass

В вашем комментарии вы упоминаете создание таблиц стилей для различных разрешений, которые не поддерживают медиа-запросы. Я бы посоветовал это и просто создал одну таблицу стилей по умолчанию для браузеров без поддержки медиа-запросов.

Answer 2

Недавно я написал модуль npm и плагин grunt, который автоматически отделяет файл css в файлах медиа-запросов. В этом случае он создаст отдельный файл css для каждого найденного медиа-запроса. This - это cli и this - плагин grunt