У меня есть папка с иконками, я использую компас для изображений спрайтов:
@import "compass/utilities/sprites";
@import "icons/*.png";
@include all-icons-sprites(true);
Это находится в файле /stylesheets/global/icons.css.scss.
Теперь в файле /stylesheets/application/index.css.scss мне нужно использовать:
@extend .icons-foo;
Я включаю папку global/ перед application/ в application/index.css.scss :
/*
*= require_tree ../global
*= require_tree .
*/
Но у меня ошибка:
".bar" failed to @extend ".icons-foo". The selector ".icons-foo" was not found.
Решение на данный момент состоит в том, чтобы повторить первый блок, который я разместил в этом посте, в application/index.css.scss.
Но если я вручную помещу "icons-foo" в класс элемента DOM, класс будет соответствовать и работать...
Как не повторить одну и ту же инструкцию? как я могу импортировать один временной спрайт и использовать его в другом файле?