Come posso definire i colors come variabili nei CSS?

Sto lavorando su un file CSS che è piuttosto lungo. So che il cliente potrebbe chiedere modifiche alla combinazione di colors e si chiedeva: è ansible assegnare i colors alle variabili, in modo che io possa semplicemente cambiare una variabile per avere il nuovo colore applicato a tutti gli elementi che lo usano?

Si noti che non posso usare PHP per modificare dynamicmente il file CSS.

Il CSS supporta questo in modo nativo con le variabili CSS .

Esempio di file CSS

:root { --main-color:#06c; } #foo { color: var(--main-color); } 

Per un esempio funzionante, vedi questo JSFiddle (l’esempio mostra che uno dei selettori CSS nel violino ha il colore hard codificato in blu, l’altro selettore CSS usa le variabili CSS, sia la syntax originale che quella corrente, per impostare il colore su blu) .

Manipolazione di una variabile CSS in JavaScript / lato client

 document.body.style.setProperty('--main-color',"#6c0") 

Il supporto è in tutti i browser moderni

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+ e Opera 36+ vengono forniti con il supporto nativo per le variabili CSS.

La gente continua a sviare la mia risposta, ma è una soluzione terribile rispetto alla gioia di sass o meno , in particolare dato il numero di gui facili da usare per entrambi questi giorni. Se hai un senso ignora tutto ciò che suggerisco di seguito.

Puoi inserire un commento nel css prima di ogni colore per poter essere usato come una sorta di variabile, che puoi modificare il valore dell’utilizzo di Trova / Sostituisci, quindi …

Nella parte superiore del file css

 /********************* Colour reference chart**************** *************************** comment ********* colour ******** box background colour bbg #567890 box border colour bb #abcdef box text colour bt #123456 */ 

Più tardi nel file CSS

 .contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456} 

Quindi, ad esempio, cambia la combinazione di colors per il testo della casella su cui fai un Trova / Sostituisci

 /*bt*/#123456 

Il CSS stesso non usa variabili. Tuttavia, puoi usare un altro linguaggio come SASS per definire il tuo stile usando le variabili e produrre automaticamente file CSS, che puoi poi pubblicare sul web. Tieni presente che dovresti rieseguire il generatore ogni volta che apporti una modifica al tuo CSS, ma non è così difficile.

Non esiste una soluzione CSS semplice. Potresti fare questo:

  • Trova tutte le istanze di background-color di background-color e color nel tuo file CSS e crea un nome di class per ogni colore unico.

     .top-header { color: #fff; } .content-text { color: #f00; } .bg-leftnav { background-color: #fff; } .bg-column { background-color: #f00; } 
  • Successivamente passa attraverso ogni singola pagina del tuo sito in cui è coinvolto il colore e aggiungi le classi appropriate per il colore e il colore di sfondo.

  • Infine, rimuovi eventuali riferimenti di colors nel tuo CSS diversi dalle tue nuove classi di colors.

Puoi provare le variabili CSS3 :

 body { --fontColor: red; color: var(--fontColor); } 

La gem “meno” ruby per CSS sembra fantastica.

http://lesscss.org/

Sì, nel prossimo futuro (scrivo questo in giugno 2012) puoi definire le variabili native css, senza usare less / sass etc! Il motore Webkit ha appena implementato le prime regole variabili CSS, quindi le versioni all’avanguardia di Chrome e Safari sono già in grado di funzionare con esse. Vedi il log di sviluppo ufficiale del Webkit (Chrome / Safari) con una demo del browser css sul sito.

Speriamo di aspettarci un supporto diffuso per browser delle variabili native css nei prossimi mesi.

Non sono chiaro sul perché non puoi usare PHP. Potresti quindi semplicemente aggiungere e utilizzare le variabili come desideri, salvare il file come file PHP e collegarlo a tale file .php come foglio di stile invece del file .css.

Non deve essere PHP, ma ottieni ciò che intendo.

Quando vogliamo la programmazione, perché non usare un linguaggio di programmazione fino a quando CSS (forse) supporta cose come variabili?

Inoltre, dai un’occhiata ai CSS orientati agli oggetti di Nicole Sullivan.

Puoi passare il CSS tramite javascript e sostituire tutte le istanze di COLOUR1 con un determinato colore (in pratica regex) e fornire un foglio di stile di backup nel caso in cui l’utente finale abbia distriggersto JS

dicejs.com (formalmente cssobjs) è una versione lato client di SASS. Puoi impostare variabili nel tuo CSS (memorizzate in CSS con formattazione json) e riutilizzare le tue variabili di colore.

 //create the CSS JSON object with variables and styles var myCSSObjs = { cssVariables : { primaryColor:'#FF0000', padSmall:'5px', padLarge:'$expr($padSmall * 2)' } 'body' : {padding:'$padLarge'}, 'h1' : {margin:'0', padding:'0 0 $padSmall 0'}, '.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'} }; //give your css objects a name and inject them $.cssObjs('myStyles',myCSSObjs).injectStyles(); 

E qui c’è un link a una demo completa scaricabile che è un po ‘più utile della loro documentazione: demo dadijs

Prendi in considerazione l’utilizzo di SCSS. È completamente compatibile con la syntax CSS, quindi un file CSS valido è anche un file SCSS valido. Ciò semplifica la migrazione, basta cambiare il suffisso. Ha numerosi miglioramenti, il più utile è variabili e selettori annidati.

È necessario eseguirlo tramite un pre-processore per convertirlo in CSS prima di inviarlo al client.

Sono stato uno sviluppatore hardcore di CSS per molti anni, ma da quando mi sono costretto a fare un progetto in SCSS, ora non userò nient’altro.

Se hai Ruby sul tuo sistema puoi farlo:

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

Questo è stato fatto per Rails, ma vedi sotto per come modificarlo per farlo funzionare da solo.

Puoi utilizzare questo metodo indipendentemente da Rails, scrivendo un piccolo script di wrapping Ruby che funziona in congiunzione con site_settings.rb e prende in considerazione i tuoi percorsi CSS e che puoi chiamare ogni volta che vuoi ri-generare il tuo CSS (ad esempio durante l’avvio del sito)

Puoi eseguire Ruby praticamente su qualsiasi sistema operativo, quindi questo dovrebbe essere abbastanza indipendente dalla piattaforma.

eg wrapper: generate_CSS.rb (esegui questo script ogni volta che devi generare il tuo CSS)

 #/usr/bin/ruby # preferably Ruby 1.9.2 or higher require './site_settings.rb' # assuming your site_settings file is on the same level CSS_IN_PATH = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files') CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' ) Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH ) 

il metodo generate_CSS_files in site_settings.rb deve quindi essere modificato in questo modo:

 module Site # ... see above link for complete contents # Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory # replacing any mention of Color Constants , eg #SomeColor# , with the corresponding color code defined in Site::Color # # We will only generate CSS files if they are deleted or the input file is newer / modified # def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') , output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets')) # assuming all your CSS files live under "./public/stylesheets" Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in| filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') )) # if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file: if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime) # in this case, we'll need to create the output CSS file fresh: puts " processing #{filename_in}\n --> generating #{filename_out}" out_file = File.open( filename_out, 'w' ) File.open( filename_in , 'r' ).each do |line| if line =~ /^\s*\/\*/ || line =~ /^\s+$/ # ignore empty lines, and lines starting with a comment out_file.print(line) next end while line =~ /#(\w+)#/ do # substitute all the constants in each line line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines end out_file.print(line) end out_file.close end # if .. end end # def self.generate_CSS_files end # module Site 

Puoi raggruppare i selettori:

 #selector1, #selector2, #selector3 { color: black; } 

Non ho paura, ma Zope e Plone usano qualcosa di simile a SASS chiamato DTML per ottenere ciò. È incredibilmente utile in CMS.

Upfront Systems ha un buon esempio del suo utilizzo in Plone.

Se scrivi il file css come un modello xsl, puoi leggere i valori del colore da un semplice file xml. Quindi crea il css con un processore xslt.

colors.xml:

   #ccc  

styles.xsl:

    body { background-color: ; }   

Comando per il rendering di css: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

 body { background-color: #ccc; } 

Certo, può, grazie al meraviglioso mondo delle classi multiple, fare questo:

 .red {color:red} .blackBack {background-color: black} 

ma spesso finisco per unirli in questo modo:

 .highlight {color:red, background-color: black} 

So che la polizia semantica ti starà addosso, ma funziona.

Non utilizzare le variabili css3 a causa del supporto.

Vorrei fare quanto segue se si desidera una soluzione di css puro.

  1. Utilizzare le classi di colors con nomi semenici .

     .bg-primary { background: #880000; } .bg-secondary { background: #008800; } .bg-accent { background: #F5F5F5; } 
  2. Separa la struttura dalla pelle (OOCSS)

     /* Instead of */ h1 { font-size: 2rem; line-height: 1.5rem; color: #8000; } /* use this */ h1 { font-size: 2rem; line-height: 1.5rem; } .bg-primary { background: #880000; } /* This will allow you to reuse colors in your design */ 
  3. Metti questi in un file css separato per cambiare secondo necessità.

Non è ansible solo con i CSS.

Puoi farlo con JavaScript e MENO usando less.js , che renderà le variabili LESS live in CSS, ma è solo per lo sviluppo e aggiunge troppi sovraccarichi per l’uso nella vita reale.

Il più vicino ansible con CSS è quello di utilizzare un selettore di sottostringa di attributi come questo:

 [id*="colvar-"] { color: #f0c69b; } 

e imposta gli id di tutti i tuoi elementi che vuoi regolare con i nomi che iniziano con colvar- , come colvar-header . Quindi quando cambi il colore, tutti gli stili ID vengono aggiornati. È il massimo che puoi ottenere con i CSS da solo.