Как мне создать динамический CSS в Rails? - PullRequest
Новая
       28

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

9 голосов
/ 24 августа 2010

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

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

Спасибо.

Ответы [ 5 ]

21 голосов
/ 08 декабря 2011

В Rails 3.1 ваши таблицы стилей могут быть предварительно обработаны с помощью erb.

Теперь предположим, что у вас есть динамический стиль под названием dynamic.css.scss.erb (.erb в конце важен!) В app/assets/stylesheets. Он будет обработан erb (а затем 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>
...

Я узнал об этом благодаря этой записи .

2 голосов
/ 24 августа 2010

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

0 голосов
/ 09 апреля 2011

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

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

0 голосов
/ 24 августа 2010

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

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

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

Gem Меньше CSS для рельсов обеспечивает интеграцию для проектов Rails с использованием языка таблиц стилей Less в конвейере ресурсов .

Если вы используете загрузчик Twitter, вы можете проверить это less rails bootstrap .

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

Извлечение Динамический CSS в Rails и Отображение ресурсов Rails в строку сообщений в блоге и статьи о Конвейере активов

Похожие SO вопросы:

...