Использование нескольких таблиц стилей с одним спрайтом Compass через импорт - PullRequest
Новая
       12

Использование нескольких таблиц стилей с одним спрайтом Compass через импорт

1 голос
/ 09 марта 2012

Я пытаюсь использовать компас для импорта и включения спрайта и набора партиалов в один файл SCSS, чтобы включенные партиалы получили доступ к сгенерированным спрайтом переменным / mixins / и т. Д. Это немного похоже на этот вопрос: Компас спрайт-изображений в нескольких таблицах стилей , но все же достаточно отличается, чтобы я решил задать новый вопрос.

Вот пример того, что я пытаюсь сделать.

все-icons.scss 

$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

// Include partials
@import "pirate-icons";
@import "ninja-icons";
@import "cowboy-icons";

Я бы хотел использовать переменные и миксины, сгенерированные из @import "icon/*.png" и @include all-icon-sprites во включенных партиалах. Я на самом деле не хочу делать @import "icon/*.png" и т. Д. В каждом из партиалов, если мне это не нужно, потому что он будет генерировать повторяющиеся записи в каждом партиале. Есть способы обойти это, не используя @include all-icon-sprites и вместо этого используя такие вещи, как @include icon-sprite(spurs). Это не идеально, что я хочу делать, но это работает. Другая вещь, которая мне не нравится, это то, что когда вы @import спрайтеете в несколько файлов, вы получаете что-то вроде: 

   create images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
unchanged images/icon-s00df19a6f5.png
   create stylesheets/all-icons.css

Есть ли способ, чтобы что-то подобное работало в Compass, или мне нужно @import "icon/*.png" в каждой из частичных частей, а затем использовать @include all-icon-sprites или несколько из них @include icon-sprite(holster)?

1 Ответ

1 голос
/ 10 марта 2012

Я чувствую себя немного глупо, но оказывается, что это уже отлично работает.

Проблемы возникают только при включении обычных файлов sass, а не партиалов (pirate-icons.scss = normal,_pirate-icons.scss = частично).Причина, по которой это не работает, когда эти файлы не являются частичными, заключается в том, что компас компилирует их отдельно, вне области действия файла, в который они включены, что может привести к несоответствиям и ошибкам, поскольку эти таблицы стилей больше не знают о переменных спрайтаи mixins, когда вы пытаетесь их использовать.

Например, когда делаете 

$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

// Include partials
@import "pirate-icons";
@import "ninja-icons";
@import "cowboy-icons";

Если бы cowboy-icons был cowboy-icons.scss, он бы скомпилировался один раз в объемефайл all-icons.scss и один раз за пределами области действия этого файла.При компиляции вне этой области любые попытки использовать один из миксов, таких как @include icon-sprite(spurs), могут вызвать ошибку, потому что он больше не знает, что это значит.

tl; dr

просто сделатьубедитесь, что пиратские иконки _pirate-icons.scss, а не pirate-icons.scss, и должны иметь желаемый эффект.

...