Как организовать импорт в sass файл при использовании mobile first?
Имеется основной файл стилей style.scss с примерно следующей структурой:
/* For mobile: */
/* For smartphones: */
@ media only screen and (min-width: 480px) {
}
/* For desktop and tablets sm: */
@ media only screen and (min-width: 768px) {
}
/* For desktop md */
@ media only screen and (min-width: 992px) {
}
/* For desktop lg */
@ media only screen and (min-width: 1200px){
}
При этом некоторые стили вынесены в отдельные файлы. Если бы не было media breakpoints , то делаем @ import "..." в начале основного файла стилей, но что если импортируемые стили тоже имеют @ media, как в этом случае правильно сделать импорт и организовать файлы? Конечно можно в импортируемых файлах оставить только мобильную версию и в основном файле переопределить в @ media что требуется. Но как то это не кажется хорошим вариантом.