Como posso definir colors como variables ​​em CSS?

Eu estou trabalhando em um arquivo CSS que é bastante longo. Eu sei que o cliente poderia solicitar alterações no esquema de colors e estava se perguntando: é possível atribuir colors a variables, para que eu possa apenas alterar uma variável para que a nova cor seja aplicada a todos os elementos que a usam?

Por favor, note que eu não posso usar o PHP para alterar dinamicamente o arquivo CSS.

CSS suporta isso nativamente com variables ​​CSS .

Exemplo de arquivo CSS

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

Para um exemplo de trabalho, veja este JSFiddle (o exemplo mostra um dos seletores CSS no violino tem a cor codificada em azul, o outro seletor CSS usa variables ​​CSS, tanto a syntax original quanto a atual, para definir a cor para azul) .

Manipulando uma variável CSS no lado JavaScript / cliente

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

O suporte está em todos os navegadores modernos

O Firefox 31+ , o Chrome 49+ , o Safari 9.1+ , o Microsoft Edge 15+ e o Opera 36+ são fornecidos com suporte nativo para variables ​​CSS.

As pessoas continuam votando a minha resposta, mas é uma solução terrível em comparação com a alegria do sass ou menos , particularmente tendo em conta o número de fácil de usar gui para ambos estes dias. Se você tem algum sentido ignorar tudo o que eu sugiro abaixo.

Você poderia colocar um comentário no css antes de cada cor para servir como um tipo de variável, que você pode alterar o valor de usar localizar / replace, então …

Na parte superior do arquivo css

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

Mais tarde no arquivo CSS

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

Então, por exemplo, para alterar o esquema de colors para o texto da checkbox que você encontrar / replace

 /*bt*/#123456 

O próprio CSS não usa variables. No entanto, você pode usar outro idioma como o SASS para definir seu estilo usando variables ​​e produzir automaticamente arquivos CSS, que você pode colocar na web. Note que você teria que re-executar o gerador toda vez que fizesse uma alteração no seu CSS, mas isso não é tão difícil.

Não existe uma solução simples de CSS. Você poderia fazer isso:

  • Encontre todas as ocorrências de background-color de background-color e color em seu arquivo CSS e crie um nome de class para cada cor exclusiva.

     .top-header { color: #fff; } .content-text { color: #f00; } .bg-leftnav { background-color: #fff; } .bg-column { background-color: #f00; } 
  • Em seguida, passe por todas as páginas do seu site onde a cor estava envolvida e adicione as classs apropriadas para cor e cor de fundo.

  • Por fim, remova todas as referências de colors no seu CSS, exceto as classs de cor recém-criadas.

Você pode tentar variables ​​CSS3 :

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

O ‘Menos’ Ruby Gem para CSS parece incrível.

http://lesscss.org/

Sim, no futuro próximo (eu escrevo isso em junho de 2012) você pode definir variables ​​css nativas, sem usar menos / sass etc! O mecanismo do Webkit implementou as primeiras regras de variável css, de modo que as versões mais avançadas do Chrome e do Safari já devem trabalhar com elas. Consulte o log de desenvolvimento do Webkit Oficial (Chrome / Safari) com uma demonstração do navegador css no local.

Espero que possamos esperar um amplo suporte ao navegador de variables ​​css nativas nos próximos meses.

Eu não estou claro porque você não pode usar o PHP. Você poderia então simplesmente adicionar e usar as variables ​​como desejar, salvar o arquivo como um arquivo PHP e vinculá-lo ao arquivo .php como a folha de estilos em vez do arquivo .css.

Não precisa ser PHP, mas você entende o que quero dizer.

Quando queremos coisas de programação, por que não usar uma linguagem de programação até o CSS (talvez) suportar coisas como variables?

Além disso, confira o CSS orientado a objects de Nicole Sullivan.

Você poderia passar o CSS pelo javascript e replace todas as instâncias de COLOUR1 por uma determinada cor (basicamente regex) e fornecer uma folha de estilo de backup caso o usuário final tenha o JS desativado

O dicejs.com (formalmente cssobjs) é uma versão do lado do cliente do SASS. Você pode definir variables ​​em seu CSS (armazenadas em CSS formatado por json) e reutilizar suas variables ​​de colors.

 //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 aqui está um link para uma demo completa para download, que é um pouco mais útil do que a documentação deles: dicejs demo

Considere o uso do SCSS. É totalmente compatível com a syntax CSS, portanto, um arquivo CSS válido também é um arquivo SCSS válido. Isso facilita a migration, basta alterar o sufixo. Ele possui vários aprimoramentos, sendo os mais úteis variables ​​e seletores nesteds.

Você precisa executá-lo por meio de um pré-processador para convertê-lo em CSS antes de enviá-lo ao cliente.

Eu sou um desenvolvedor hardcore de CSS há muitos anos, mas desde que me forcei a fazer um projeto no SCSS, agora não vou usar mais nada.

Se você tem Ruby no seu sistema, você pode fazer isso:

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

Isso foi feito para o Rails, mas veja abaixo como modificá-lo para executá-lo sozinho.

Você poderia usar este método independentemente do Rails, escrevendo um pequeno script wrapper do Ruby que trabalha em conjunto com o site_settings.rb e leva seus caminhos CSS em conta, e que você pode chamar toda vez que você quiser gerar novamente o seu CSS (por exemplo durante a boot do site)

Você pode rodar Ruby em praticamente qualquer sistema operacional, então isso deve ser independente da plataforma.

eg wrapper: generate_CSS.rb (execute este script sempre que precisar gerar seu 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 ) 

O método generate_CSS_files em site_settings.rb precisa ser modificado assim:

 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 

Você pode agrupar seletores:

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

Não estou com medo do PHP, mas o Zope e o Plone usam algo semelhante ao SASS chamado DTML para conseguir isso. É incrivelmente útil em CMS.

A Upfront Systems tem um bom exemplo de seu uso no Plone.

Se você escrever o arquivo css como um modelo xsl, poderá ler os valores das colors em um arquivo xml simples. Em seguida, crie o css com um processador xslt.

colors.xml:

   #ccc  

styles.xsl:

    body { background-color: ; }   

Comando para renderizar css: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

 body { background-color: #ccc; } 

Claro que pode, graças ao maravilhoso mundo de várias classs, fazer isso:

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

mas muitas vezes acabo combinando-os assim:

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

Eu sei que a polícia semântica estará em cima de você, mas funciona.

Não use variables ​​css3 devido ao suporte.

Eu faria o seguinte se você quiser uma solução CSS pura.

  1. Use classs de colors com nomes semenáticos .

     .bg-primary { background: #880000; } .bg-secondary { background: #008800; } .bg-accent { background: #F5F5F5; } 
  2. Separe a estrutura da pele (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. Coloque estes dentro de um arquivo css separado para alterar conforme necessário.

Não é possível apenas com CSS.

Você pode fazê-lo com JavaScript e LESS usando less.js , que renderizarão menos variables ​​LESS em CSS ao vivo, mas é apenas para desenvolvimento e adiciona muita sobrecarga para uso real.

O mais próximo que você pode vir de CSS é usar um seletor de substring de atributo como este:

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

e defina os id de todos os seus elementos que você deseja ajustar para os nomes que começam com colvar- , como colvar-header . Então, quando você muda a cor, todos os estilos de ID são atualizados. Isso é o mais perto que você pode ficar com CSS sozinho.