написание динамический CSS с Джейд

Я пытаюсь записать некоторые динамические CSS с помощью Джейд, например, так:написание динамический CSS с Джейд

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

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

источник

2012-03-30 Tyler Schroeder

'style' и' script' должны принимать только текст. Я не уверен, почему он пытается проанализировать вашу итерацию. –

Ну, это не синтаксический анализ интернационала, он просто пытается разрешить «элемент» как локальную переменную. Похоже, что переменные, переданные в представление, по-прежнему можно ссылаться, но любые переменные, сгенерированные в этом блоке сценария, не могут. –

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

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

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

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

источник

2012-03-30 19:32:14

Да, этого я и боялся. Я закончил тем, что записывал файлы CSS для каждого клиента и динамически ссылался на них. Спасибо за вашу помощь! –

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

источник

2012-03-31 10:18:42 Daniel

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

источник

2012-08-08 18:12:47 RevNoah

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

html 
    head 
    style 
     include style.css

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

источник

2015-05-10 19:50:04 Vince

написание динамический CSS с Джейд

ответ

Смежные вопросы