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

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

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

Благодарю.

Источник

5 ответов

Решение

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

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

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

Если вы используете Twitter Bootstrap, вы можете проверить это без загрузки Rails.

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

Изучите динамический CSS в ресурсах Rails и Render Rails, чтобы разместить посты в блоге и статью о конвейере активов

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

Источник

В 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>
...

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

Источник

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

Источник

За эти годы было много разработок, и недавно я понял, как делать то, что задает этот вопрос. И поскольку прошло около 9-10 лет с тех пор, как кто-то ответил на это, я подумал, что вложу свои 2 цента.

Как говорили другие, это не очень хорошая практика и, следовательно, не может быть сделано, чтобы помещать код ruby ​​непосредственно в файл CSS, поскольку CSS предварительно скомпилирован и не может быть динамически изменен в файле... НО, это можно динамически изменять вне файла!

Мне нужно будет дать краткий обзор переменных CSS на случай, если будущие читатели не знают, как их использовать.

CSS использует переменные в своем языке кодирования, чтобы упростить одновременное изменение множества элементов. Вы помещаете эти переменные в начало файла CSS вrootраздел. Как это:

:root {
    --primary: #0061f2;
    --secondary: #6900c7;
}

Теперь, когда вы захотите стилизовать элемент одного из этих цветов, вы можете просто поставить var(--variableName) как это:

.btn{
   color: var(--secondary);
   background-color: var(--primary);
}

.h1 {
   color: var(--primary);
}

Вы можете видеть, как тогда было бы намного проще изменить переменную в root раздел и таким образом изменить все другие экземпляры в CSS.

Теперь о динамической части Ruby.

в <head>в разделе файла приложения (или, в случае этого вопроса, файла, содержащего шаблон для панели администратора), вам нужно будет повторно объявить переменные CSS с помощью ваших динамических переменных и пометить их как важные. Например, предположим, что вы позволяете пользователю выбирать основной и дополнительный цвета для своей панели инструментов, и они хранятся в профиле пользователя, который называется следующим образом:user.primary_color а также user.secondary_color. Вам нужно будет добавить это в свой<head> раздел:

<style>
  :root{
    --primary: <%= user.primary_color %> !important;
    --secondary: <%= user.secondary_color %> !important;
  }
</style>

Этот !important Тег будет переопределять переменные, найденные в файле CSS, тем самым динамически позволяя пользователю изменять CSS и просматривать свою панель инструментов, сохраняя ее постоянство (поскольку значения сохраняются в их профиле).

Надеюсь, это поможет будущим разработчикам.

Удачного кодирования!

Источник

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

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

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

Источник
Другие вопросы по тегам