Sass: работа с селекторами IE 4095 на ограничение таблицы стилей

Примечание: этот вопрос относится к проекту Rails с Sass & Compass. Использование конвейера Rails Asset? Тогда взгляните на этот вопрос.

мы разрабатываем большое приложение со многими вариантами использования и многими индивидуально стилизованными страницами, частично для нескольких контекстов. Что просто означает много информации о стиле.

с новейшим разделом нашего приложения, мы нарушили предел Internet Explorer 4095 селекторов в таблица стилей. (Хотите доказательство этого ограничения? http://marc.baffl.co.uk/browser_bugs/css-selector-limit/)

ОК. Итак, почему бы нам просто не разделить таблицу стилей приложений на несколько по дизайну?

Ну, миксины и наследование селектора не будут работать в нескольких файлах Sass (не частичных), верно?

Я бы сказал, что качество таблиц стилей довольно хорошее, мы не можем оптимизировать чрезмерное количество селекторов. (Есть скорее больше, чтобы прибыть.) Я также считаю, что минимизация количества селекторов не должна быть нашей основной целью оптимизации. Команда Sass core рекомендует использовать наследование селектора вместо mixins, где это применимо, чтобы сохранить размер файла CSS. При этом количество селекторов имеет тенденцию расти.

Так что же мне делать?

Я думаю о написании сценария, который генерирует дополнительные файлы css, разбивая мое большое приложение.файл CSS. Они будут загружены только в IE тогда (так что у меня нет нескольких запросов в современных браузерах). Для этого мне понадобится простой парсер css, чтобы вырезать приложение.css файл после макс. 4095 селекторы в действительном положении. И мне понадобится компас компилировать после крючка, чтобы разработчикам не нужно было генерировать файлы IE вручную, чтобы проверить его.

Пожалуйста, скажи, что у тебя есть идея получше!

лучшие, Кристиан!--5-->

7
compass-sass css internet-explorer ruby-on-rails sass

3 ответов

Mixins можно использовать в нескольких файлах. Однако логически невозможно, чтобы @extend мог работать с несколькими файлами. Целью данной директивы является создание единого правила (который не должен дублироваться в нескольких файлах). Поэтому я не могу разделить файлы.

таким образом, я реализовал splitter:https://gist.github.com/1131536

после эти два коммиты нашли свой путь в Sass и Компас, вы можете использовать следующий крюк в ваших рельсах config/compass.rb для автоматического создания дополнительных таблиц стилей для IE:

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    CssSplitter.split(filename)
  end
end

обновление:

упомянутый выше CssSplitter был выпущен как драгоценный камень:https://github.com/zweilove/css_splitter

6

Если вы не можете сократить количество селекторов, нет другого выбора, кроме как разделить файл CSS.

ваше предлагаемое решение для этого уже звучит оптимальным, если его немного сложно реализовать.

1

простой способ сделать это http://blesscss.com/. Просто:

  • установить узел.js
  • выполнить npm install bless-g
  • источник blessc.вывод css.в CSS
1