Я начал импортировать общие вещи, такие как переменные и примеси, в одном месте - файле манифеста css. Теперь я импортирую некоторые миксины Compass, используя прямой путь к файлам.
Мой вопрос: если использование @import 'compass' внедряет всю структуру в application.css или это делается путем просмотра ссылок в файлах sass, а затем импорта только необходимых миксинов?
Я не хочу включать все.
Согласно документам @import 'compass' будут импортированы модули CSS3, типографика и утилиты. Эти модули ничего не добавляют в ваш выходной CSS, они содержат только миксины.
Ограничив импорт определенным модулем или подмодулем (например, @import 'compass/css3/image'), вы сократите время, необходимое для компиляции файлов SASS в CSS.
Например, давайте создадим два файла.
// all.scss
@import "compass";
.candy {
@include background(linear-gradient(top left, #333, #0c0));
}
// module.scss
@import "compass/css3/images";
.candy {
@include background(linear-gradient(top left, #333, #0c0));
}
Если мы их скомпилируем (compass compile sass/FILENAME.scss), результирующий CSS будет идентичным:
.candy {
background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));
background: -webkit-linear-gradient(top left, #333333, #00cc00);
background: -moz-linear-gradient(top left, #333333, #00cc00);
background: -o-linear-gradient(top left, #333333, #00cc00);
background: linear-gradient(top left, #333333, #00cc00);
}
Теперь давайте добавим аргумент --time в команду компиляции и сравним результаты. Для моей машины потребовалось 1,516 с для компиляции all.css против всего 0,108 с для module.css.
@importссылается только на модули, но именно@includeвводит код в выходной CSS. Спасибо за разъяснение! 26.08.2013