Как создать динамический CSS в Rails?
, что является лучшим / наиболее эффективным способом создания динамического CSS с помощью Rails. I Я разрабатываю админку на сайте, где я хотел бы, чтобы пользователь мог настраивать стиль своих профилей (в основном цвет), который также будет сохранен.
Не могли бы вы просто встроить скрипт ruby в файл css? Вам нужно изменить расширение файла с css?
Спасибо.
3 ответа
В настоящее время существует множество опций для генерации динамических CSS в рельсах.
Вы можете использовать меньше css - это расширение CSS с дополнительными функциями.
Gem Less css для rails обеспечивает интеграцию для проектов Rails с использованием языка таблиц стилей Less в конвейере ресурсов .
Если вы используете загрузку twitter, вы можете проверить эту less rails bootstrap .
Также вы можете использовать еще один язык расширения CSS Sass для генерации CSS. Вот жемчужина Saas rails .
Ознакомьтесь с сообщениями в блоге Dynamic CSS in Rails и Render Rails Assets to String и статьей о Asset Pipeline
Связанные вопросы SO :
ERB можно использовать с CSS, вам просто нужно отобразить css в контроллере. Однако для столь востребованного ресурса я не рекомендую создавать его каждый раз. Я бы сохранил пользовательскую таблицу стилей в memcached или redis и вспоминал из нее при загрузке страницы, вместо того, чтобы каждый раз заново рендерить файл. Когда они обновят свой стиль, вы можете истечь срок действия кеша, просто убедитесь, что он будет перестроен при рендеринге страницы.
Я только что создал это для другого сайта. У меня есть действие контроллера и представление, которое извлекает значения цвета из базы данных, а затем отображает настраиваемый CSS на основе учетной записи текущего пользователя. Для оптимизации я использую встроенное в Rails кэширование страниц, которое хранит копию на диске и служит в качестве статического актива. Красиво и быстро.
Вот пример из кода ERB
#header { background: <%= @colors["Header Stripe Background"] %>; border: 1px solid <%= @colors["Header Stripe Border"] %>; }
#header h1 {color: <%= @colors["Headline Color"] %>; }
#header p a { background: <%= @colors["Control Link Background"] %>; color: <%= @colors["Control Links"] %>;}
#header p a:hover {background: <%= @colors["Control Link Hover"] %>; text-decoration:underline;}