Написание динамического CSS с Jade

Question

Я пытаюсь написать какой-нибудь динамический CSS с использованием Jade, например так:

style(type='text/css')
    each item in colors
        .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }

Однако это приводит к следующей ошибке:

ReferenceError: media='print')
    7|  style(type='text/css')
  > 8|      - for(var item in colors)
    9|          .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; }
    10| block Content
    11|     include scheduleTemplate

item is not defined

Если я удаляю тег стиля, это делает хорошо.Есть ли способ использовать итерацию в блоке стилей?

Answer 1

Поскольку теги style допускают только текст в Jade, он обрабатывает ваш each item in colors как обычный текст.Затем он встречает #{item.class} и пытается разобрать его, но не удается, потому что он не определил item в предыдущей строке.

К сожалению, я не уверен, что есть хороший способсделай это в Джейд.Возможно, вам просто нужно заранее определить все ваши CSS в JS, а затем вставить его так:

style(type='text/css')
    #{predefined_css}

В этот момент может быть проще переместить стили во внешнюю таблицу стилей, котораягенерируется для каждого пользователя и затем обслуживается с некоторыми разумными заголовками кэширования.Это позволило бы избежать трудностей при попытке заставить Jade выполнять динамический CSS и ускорить последующую загрузку страниц для ваших пользователей.

Answer 2

Вы можете использовать стилус. Она сделана теми же людьми, что и Джейд, и в разумных пределах практически идентична Джейд.

Answer 3

Другой способ - импортировать вашу собственную таблицу стилей CSS. В Jade Doc вы можете видеть, что вы можете включить таблицу стилей с таким кодом:

html
  head
    style
      include style.css

Затем вы можете определить любой CSS в отдельном файле, на который вы можете ссылаться.

Answer 4

Я столкнулся с похожей проблемой, когда хотел добавить определенный класс в тег body в зависимости от маршрута, аналогично тому, что я делал в PHP. В конце я использовал наследование шаблонов jade для достижения аналогичного результата.