Comment créer un CSS dynamique dans Rails?

Question

Quelle est la meilleure/la manière la plus efficace de créer des CSS dynamiques avec Rails. Je suis en train de développer une zone d'administration sur un site, où j'aimerais qu'un utilisateur puisse personnaliser le style de son profil (Color major), qui sera également sauvegardé. Voulez-vous simplement intégrer le script Ruby dans le fichier CSS? Devez-vous changer l'extension de css?

Merci.

Answer 1

Actuellement, il existe de nombreuses options pour générer des css dynamiques dans les rails.

Vous pouvez utiliser less css - est une extension de CSS avec des fonctionnalités supplémentaires.

Gem Less css for rails fournit une intégration pour les projets Rails en utilisant le langage Lessheetheet dans le asset pipeline.

Si vous utilisez le bootstrap Twitter, vous pouvez vérifier ceci less rails bootstrap.

Vous pouvez également utiliser un autre langage d'extension CSS Sass pour générer du code CSS. Voici un Saas rails gem.

Découvrez Dynamic CSS in Rails et Render Rails assets to string messages blog et article sur Asset Pipeline

connexes SO questions:

• 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

Vous pouvez utiliser ERB avec CSS, vous avez juste besoin de rendre css dans le contrôleur. Cependant, pour une ressource si fortement demandée, je ne recommande pas de générer ceci à chaque fois. Je stockerais la feuille de style des utilisateurs dans memcached ou redis, et je m'en souviendrais lorsque la page se chargerait, plutôt que de ré-indiquer le fichier à chaque fois. Quand ils mettent à jour leur style, vous pouvez expirer le cache, assurez-vous juste qu'il est reconstruit quand la page s'affiche.

Answer 3

Je viens de construire cela pour un autre site. J'ai une action de contrôleur et une vue qui tire les valeurs de couleur hors de la base de données, puis rend un CSS personnalisé basé sur le compte de l'utilisateur actuel. Pour optimiser, j'utilise la mise en cache de la page Rails intégrée, qui stocke une copie sur le disque et la sert en tant qu'actif statique. Nice et rapide.

Voici un exemple du code 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

Cette solution définit quelques constantes dans config/site_settings.rb, qui peut ensuite être utilisé dans l'application Rails, ainsi que pour générer automatiquement les fichiers CSS chaque fois les ont été modifiés Rails application démarre et les fichiers d'entrée CSS ..

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

Answer 5

Dans Rails 3.1, vous pouvez avoir votre feuille de style pré-traitées par Erb.

Maintenant, disons que vous avez un style dynamique appelé dynamic.css.scss.erb (le .erb à la fin est important!) dans app/assets/stylesheets. Il sera traité par Erb (puis par Sass), et en tant que telle peut contenir des choses comme

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

Vous pouvez l'inclure comme une feuille de style.

Quelle devrait être la dynamique?

Notez que cela ne sera traité qu'une seule fois, donc, si les valeurs changent, la feuille de style ne le fera pas.

Je ne pense pas qu'il existe un moyen super efficace pour le rendre complètement dynamique, mais il est toujours possible de générer le CSS pour toutes les demandes. Avec cette mise en garde à l'esprit, voici une aide pour que 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 

Voici comment l'utiliser:

D'abord, copiez l'assistant ci-dessus dans app/helpers/application_helper.rb.

Vous pouvez alors l'inclure dans votre page comme suit:

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

Assurez-vous que votre mise en page utilise le contenu :head. Par exemple, votre layout/application.html.erb pourrait ressembler à:

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

J'ai trouvé ce grâce à this post.