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

Я пытаюсь выписать некоторый динамический 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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

html
  head
    style
      include style.css

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

Ответ 4

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