Wie erstelle ich dynamisches CSS in Rails?

Question

Was ist die beste/effizienteste Methode zum Erstellen dynamischer CSS mit Rails. Ich entwickle einen Admin-Bereich auf einer Website, wo ich möchte, dass ein Benutzer in der Lage ist, den Stil ihrer Profile anzupassen (meist Farbe), die ebenfalls gespeichert werden.

Möchten Sie nur Ruby-Skript in die CSS-Datei einbetten? Müssten Sie die Dateierweiterung von CSS ändern?

Danke.

Answer 1

Derzeit gibt es viele Möglichkeiten, dynamische CSS in Schienen zu generieren.

Sie können less css verwenden - ist eine Erweiterung für CSS mit zusätzlichen Funktionen.

Gem Less css for rails bietet die Integration für Rails-Projekte unter Verwendung der Stylesheet-Sprache Less in asset pipeline.

Wenn Sie Twitter Bootstrap verwenden, können Sie dies überprüfen less rails bootstrap.

Sie können auch eine weitere CSS-Erweiterungssprache Sass zum Generieren von CSS verwenden. Hier ist ein Saas rails gem.

Check out Dynamic CSS in Rails und Render Rails assets to string Blog-Beiträge und Artikel über Asset Pipeline

Verwandte SO Fragen:

• 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

Sie können ERB mit CSS verwenden, Sie müssen nur CSS im Controller rendern. Für solch eine stark angeforderte Ressource empfehle ich jedoch nicht, dies jedes Mal zu generieren. Ich würde das Stylesheet des Benutzers in memcached oder redis speichern und von ihm beim Laden der Seite abrufen, anstatt die Datei jedes Mal neu zu rendern. Wenn sie ihren Stil aktualisieren, können Sie den Cache ablaufen lassen, stellen Sie einfach sicher, dass er beim Rendern der Seite neu erstellt wird.

Answer 3

Ich habe dies nur für eine andere Website gebaut. Ich habe eine Controlleraktion und eine Ansicht, die Farbwerte aus der Datenbank abruft und anschließend ein angepasstes CSS basierend auf dem aktuellen Benutzerkonto rendert. Zur Optimierung verwende ich das integrierte Rails-Caching, das eine Kopie auf dem Datenträger speichert und als statisches Asset bereitstellt. Schön und schnell.

Hier ist ein Beispiel aus dem ERB Code

#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

Diese Lösung einige Konstanten in config/site_settings.rb definiert, die dann während der Rails-Anwendung verwendet werden können, sowie für automatisch die CSS-Dateien zu erzeugen, wann immer die Rails-Anwendung startet und die CSS-Eingabedateien geändert wurden ..

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

Answer 5

In Rails 3.1, können Sie Ihre Stylesheets vorverarbeitet von erb haben können.

des Nun lassen Sie sagen, Sie haben einige dynamische Styling dynamic.css.scss.erb genannt (die .erb am Ende ist wichtig!) in app/assets/stylesheets. Es wird von erb verarbeitet werden (und dann von Sass), und als solche Sachen wie

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

Sie können es umfassen wie jedes Sheet enthalten.

Wie dynamisch sollte es sein?

Beachten Sie, dass es nur einmal verarbeitet wird. Wenn sich die Werte ändern, wird das Stylesheet nicht ausgeführt.

Ich glaube nicht, dass es eine super effiziente Möglichkeit gibt, es komplett dynamisch zu machen, aber es ist immer noch möglich, das CSS für alle Anfragen zu generieren. Mit dieser Einschränkung in den Sinn kommt, hier ein Helfer für die in 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 

Hier ist, wie es zu benutzen:

zuerst die oben Helfer in app/helpers/application_helper.rb kopieren.

Sie können dann fügen ihn in Ihre Seite wie folgt:

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

Stellen Sie sicher, dass Ihr Layout den Inhalt :head verwendet. Zum Beispiel könnte Ihre layout/application.html.erb wie folgt aussehen:

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

ich dies aus durch this post gefunden.