¿Cómo se crea CSS dinámico en los carriles?

StackOverflow https://stackoverflow.com/questions/3556915

  •  30-09-2019
  •  | 
  •  

Pregunta

¿cuál es la mejor manera / más eficiente de crear CSS dinámico con rieles. Estoy desarrollando un área de administración en un sitio, donde me gustaría que un usuario sea capaz de personalizar el estilo de sus perfiles (color en su mayoría), que también se salvó.

¿Quieres que acaba de insertar ruby ??script en el archivo css? Se necesita para cambiar la extensión del archivo de css?

Gracias.

¿Fue útil?

Solución

En la actualidad hay una gran cantidad de opciones para generar CSS dinámico en los carriles.

Se puede usar menos css -. Es una extensión de CSS con características adicionales

Menos css para los carriles ofrece la integración de proyectos Rails utilizando el lenguaje de hoja de estilo en el Menos ducto activo .

Si está utilizando Twitter de arranque se puede comprobar esto menos carriles de arranque .

También puede usar uno más CSS lenguaje de extensión Sass para generar CSS. Aquí es un Saas carriles joya .

dinámico CSS en Rails y Render activos rieles de cadena las entradas del blog y el artículo sobre activos Pipeline

preguntas relacionadas SO:

Otros consejos

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

Ahora digamos que usted tiene un poco dinámico estilo denominado dynamic.css.scss.erb (el .erb al final es importante!) En app/assets/stylesheets. Se 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 %>
}

Se puede incluirlo como cualquier hoja de estilo.

¿Cómo dinámica debe ser?

Tenga en cuenta que no será más que una vez procesada, sin embargo, por lo que si los valores de los cambios, la hoja de estilo no lo hará.

No creo que hay una manera eficiente estupenda para hacer tenerlo completamente dinámico, sin embargo, pero todavía 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

He aquí cómo usarlo:

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

A continuación, puede incluirlo 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 :head contenido. Por ejemplo, su layout/application.html.erb podría ser: 

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

Yo descubrí esto gracias a este post .

Se puede usar ERB con CSS, sólo tiene que hacer css en el controlador. Sin embargo, para tal un recurso muy solicitado, no recomiendo que genera esto cada vez. Me almacenar la hoja de estilo en los usuarios Redis memcached o, y el recuerdo de ella cuando se carga la página, en lugar de rerendering el archivo cada vez. Cuando actualicen su estilo, puede caducar el caché, sólo asegúrese de que se actualiza cuando la página se representa.

Me acaba de construir esto por otro sitio. Tengo una acción del controlador y una vista de que los valores de color tirones fuera de la base de datos, a continuación, haga que el CSS personalizado basado en la cuenta del usuario actual. Para optimizar, estoy usando la página construida en los carriles de almacenamiento en caché, la cual almacena una copia en el disco y sirve como un activo estática. Agradable y rápido.

Este es un ejemplo del código 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;}

Esta solución define algunas constantes en config / site_settings.rb, que luego pueden ser utilizados en toda la aplicación Rails, así como para la generación automática de los archivos CSS cada vez que han sido modificados los carriles de aplicación se inicia y los archivos de entrada CSS ..

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top