Come posso accedere agli oggetti Rails in Sass?

Question

In un progetto Rails 3.1.0, ho aziende con alcuni attributi personalizzabili come background_color e link_color. Voglio essere in grado di impostare alcune variabili Sass in questo modo:

$background_color: <%= @company.background_color %> 
$link_color: <%= @company.link_color 

... 

Questo non funziona perché @company è nullo quando Sass fa la sua cosa. Non sono sicuro di come risolvere il problema in modo dinamico (è possibile creare società e modificare i colori e aggiornare immediatamente le viste). Eventuali suggerimenti?

Answer 1

penso che si potrebbe essere in grado di fare qualcosa di proprio come quello che hai lì, ma è necessario cambiare le estensioni dei file da '.css.scss.erb'

Answer 2

mi viene in mente un paio di approcci dalla parte superiore della mia testa:

1. Serve il foglio di stile attraverso un controller.
2. Utilizzare le classi CSS per configurare i colori e servire solo CSS tramite un controller, parziale in linea o un CSS @import.

Servire il foglio di stile tramite un controller è piuttosto semplice, quindi non c'è molto da dire. Questo potrebbe essere un po 'brutto e ingombrante.

Per la seconda, dovreste aggiungere un paio di classi CSS aggiuntivi:

.custom-bg { 
    background-color: some-default-bg; 
} 
.link-fg { 
    color: some-default-fg; 
} 
/*...*/ 

Poi ogni elemento che ha bisogno di usare il colore di sfondo personalizzato avrebbe bisogno di loro abituali classi CSS e custom-bg; shenanigans simili sarebbero necessari per gli altri valori configurabili. Per fornire il CSS personalizzato, è possibile incorporare un elemento <style> nel codice HTML utilizzando un partial ERB standard oppure è possibile servire il CSS tramite un controller (tramite <style src="..."> o @import). Quindi simulerai la bontà di SASSY con le classi CSS di vecchia scuola nel tuo HTML.

C'è anche JavaScript. Avresti bisogno di qualche modo per identificare gli elementi che hanno bisogno i loro colori regolati e quindi regolare direttamente con le cose in questo modo:

$('.need-custom-background').css('background-color', '...'); 

Answer 3

dare un seguito a questo, ho fatto creare un controller foglio di stile ma era piuttosto in modo di ottenere l'analisi di Sass e i percorsi di caricamento della pipeline delle risorse funzionano correttamente. Ho finito col dumping e riorganizzando gli stili in modo da poter generare un foglio di stile statico per ogni azienda che viene rigenerata e caricata su S3 all'aggiornamento aziendale.