Как создать динамический CSS в Rails?

Question

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

Вы просто вставляете скрипт ruby ​​в файл css? Вам нужно было изменить расширение файла из css?

Спасибо.

Answer 1

В настоящее время существует множество вариантов генерации динамического css в рельсах.

Вы можете использовать less css - это расширение для CSS с дополнительными функциями.

Gem Less css for rails обеспечивает интеграцию проектов Rails с использованием языка Less stylesheet в asset pipeline.

Если вы используете twitter bootstrap, вы можете проверить это less rails bootstrap.

Также вы можете использовать еще один язык расширения CSS Sass для генерации CSS. Вот Saas rails gem.

ЗАКАНЧИВАТЬ Dynamic CSS in Rails и Render Rails assets to string блог и статьи о Asset Pipeline

Связанные SO вопросы:

• Best way to handle dynamic css in a rails app
• Dynamic CSS in Rails asset pipeline, compile on fly
• Rails: change CSS property dynamically?

Answer 2

Вы можете использовать ERB с CSS, вам просто нужно отобразить css в контроллере. Однако для такого сильно запрашиваемого ресурса я не рекомендую его генерировать каждый раз. Я бы сохранил таблицу стилей пользователей в memcached или redis и напомнил об этом, когда загружается страница, а не повторно передает файл каждый раз. Когда они обновляют свой стиль, вы можете закончить кеш, просто убедитесь, что он перестраивается при отображении страницы.

Answer 3

Я только что построил это для другого сайта. У меня есть действие контроллера и представление, которое вытаскивает значения цвета из базы данных, а затем отображает настроенный 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;} 

Answer 4

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

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

Answer 5

В Rails 3.1, вы можете иметь ваши таблицы стилей, предварительно обработаны Еврорадио.

Теперь предположим, что у вас есть динамический стиль, называемый dynamic.css.scss.erb (.erb в конце очень важен!) в app/assets/stylesheets. Он будет обработан Еврорадио (а затем Sass), и как таковые могут содержать такие вещи, как

.some_container { 
    <% favorite_tags do |tag, color| %> 
    .tag.<%= tag %=> { 
     background-color: #<%= color %>; 
    } 
    <% end %> 
} 

Вы можете включить его, как и любой таблицы стилей.

Насколько динамичным оно должно быть?

Обратите внимание, что он будет обрабатываться только один раз, поэтому, если значения меняются, таблица стилей не будет.

Я не думаю, что есть супер эффективный способ сделать это полностью динамичным, но все же возможно генерировать CSS для всех запросов. С учетом этой оговорки, вот помощник для этого в Rails 3.1:

def style_tag(stylesheet) 
    asset = YourApplication::Application.assets[stylesheet] 
    clone = asset.class.new(asset.environment, asset.logical_path, asset.pathname, {}) 
    content_tag("STYLE", clone.body.html_safe, type:"text/css") 
    end 

Вот как его использовать:

Сначала скопируйте выше помощника в app/helpers/application_helper.rb.

Вы можете включить его в вашей странице следующим образом:

<% content_for :head do %> 
    <%= style_tag "dynamic.css" %> 
<% end %> 
The rest of your page. 

Убедитесь, что ваш макет использует содержание :head. Например, ваш layout/application.html.erb может выглядеть следующим образом:

... 
<HEAD> 
    .... 
    <%= yield :head %> 
</HEAD> 
... 

Я нашел это благодаря this post.