¿Cómo creo CSS dinámico en Rails?

Question

cuál es la mejor/más eficiente forma de crear CSS dinámico con Rails. Estoy desarrollando un área de administración en un sitio, donde me gustaría que un usuario pueda personalizar el estilo de sus perfiles (Color principalmente), que también se guardará.

¿Incrustaría la secuencia de comandos de ruby ​​en el archivo css? ¿Necesitarías cambiar la extensión de archivo de css?

Gracias.

Answer 1

Actualmente hay muchas opciones para generar css dinámicos en los rieles.

Puede usar less css - es una extensión de CSS con características adicionales.

Gem Less css for rails proporciona integración para proyectos de Rails que utilizan el lenguaje de hojas de estilo Menos en el asset pipeline.

Si está utilizando twitter bootstrap puede consultar less rails bootstrap.

También puede utilizar un lenguaje de extensión CSS más Sass para generar CSS. Aquí hay un Saas rails gem.

Echa un vistazo a Dynamic CSS in Rails y Render Rails assets to string blogs y el artículo sobre Asset Pipeline

relacionados SO preguntas:

• 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

Puede usar ERB con CSS, solo necesita procesar css en el controlador. Sin embargo, para un recurso tan solicitado, no recomiendo generar esto cada vez. Almacenaba la hoja de estilo de los usuarios en memcached o redis, y la recuerdo cuando carga la página, en lugar de volver a enviar el archivo cada vez. Cuando actualizan su estilo, puede caducar el caché, solo asegúrese de que se reconstruya cuando se visualice la página.

Answer 3

Acabo de construir esto para otro sitio. Tengo una acción de controlador y una vista que extrae los valores de color de la base de datos, luego muestra un CSS personalizado basado en la cuenta del usuario actual. Para optimizar, estoy utilizando el almacenamiento en caché integrado en la página Rails, que almacena una copia en el disco y la sirve como un activo estático. Agradable y rápido.

Aquí hay un ejemplo del código de 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

Esta solución define algunas constantes en config/site_settings.rb, que luego se puede utilizar en toda la aplicación Rails, así como para la generación automática de los archivos CSS siempre que sea los carriles de aplicación se inicia y los archivos de entrada CSS se han modificado ..

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

Answer 5

En Rails 3.1, usted puede tener sus hojas de estilo pre-procesada por erb.

Ahora digamos que tiene un estilo dinámico llamado dynamic.css.scss.erb (el .erb al final es importante!) en app/assets/stylesheets. Que será procesada por erb (y luego por Sass), y como tal puede contener cosas como

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

Puede incluirlo como cualquier hoja de estilo.

¿Qué tan dinámico debería ser?

Tenga en cuenta que solo se procesará una vez, por lo que si los valores cambian, la hoja de estilo no lo hará.

No creo que haya una manera súper eficiente de tenerlo completamente dinámico todavía, pero aún es posible generar el CSS para todas las solicitudes. Con esta advertencia en mente, aquí hay un ayudante para que en 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 

Así es como se usa:

En primer lugar, copie el ayudante más arriba en app/helpers/application_helper.rb.

continuación, se puede incluir en su página de la siguiente manera:

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

Asegúrese de que su diseño utiliza el contenido :head. Por ejemplo, su layout/application.html.erb podría parecerse a:

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

descubrí esto gracias a this post.