Como posso definir cores como variáveis ​​em CSS?

Estou trabalhando em um arquivo CSS que é bastante longo. Eu sei que o cliente poderia solicitar alterações no esquema de cores e fiquei pensando: é possível atribuir cores às variáveis, para que eu possa alterar uma variável para que a nova cor seja aplicada a todos os elementos que a usam?

Observe que não posso usar o PHP para alterar dinamicamente o arquivo CSS.

CSS suporta isso nativamente com variáveis ​​de CSS .

Arquivo CSS de exemplo

:root {
    --main-color:#06c;
}

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

Para um exemplo de trabalho, consulte este JSFiddle (o exemplo mostra que um dos seletores de CSS no violino tem a cor codificada em azul, o outro seletor de CSS usa variáveis ​​CSS, sintaxe original e atual, para definir a cor em azul) .

Manipulando uma variável CSS no JavaScript / lado do cliente

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

O suporte está em todos os navegadores modernos

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

As pessoas continuam votando na minha resposta, mas é uma solução terrível em comparação com a alegria do sass ou menos , principalmente devido ao número de GUIs fáceis de usar nos dois dias. Se você tem algum sentido, ignore tudo o que eu sugiro abaixo.

Você pode colocar um comentário no css antes de cada cor para servir como uma espécie de variável, que pode alterar o valor do uso de localizar / substituir, para ...

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

*/

Posteriormente no arquivo CSS

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

Em seguida, para, por exemplo, alterar o esquema de cores do texto da caixa em que você encontra / substitui

/*bt*/#123456

O próprio CSS não usa variáveis. No entanto, você pode usar outro idioma como o SASS para definir seu estilo usando variáveis ​​e produzir automaticamente arquivos CSS, que podem ser colocados na web. Observe que você precisaria executar novamente o gerador toda vez que fizer uma alteração no seu CSS, mas isso não é tão difícil.

Você pode tentar variáveis ​​CSS3 :

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

Não existe uma solução fácil apenas para CSS. Você pode fazer isso:

• Encontre todas as instâncias background-colore colorno seu arquivo CSS e crie um nome de classe para cada cor exclusiva.

  .top-header { color: #fff; }
  .content-text { color: #f00; }
  .bg-leftnav { background-color: #fff; }
  .bg-column { background-color: #f00; }

• Em seguida, percorra todas as páginas do site em que a cor estava envolvida e adicione as classes apropriadas para a cor e para o plano de fundo.

• Por fim, remova qualquer referência de cores em seu CSS, exceto as classes de cores recém-criadas.

Yeeeaaahhh .... agora você pode usar a função var ( ) em CSS .. ...

A boa notícia é que você pode alterá-lo usando o acesso JavaScript , que também mudará globalmente ...

Mas como declará-los ...

É bem simples:

Por exemplo, você deseja atribuir a #ff0000a a var(), simplesmente atribuí-lo :root, também preste atenção a --:

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

As boas coisas são o suporte do browser não é ruim, também não precisa ser compilado para ser usado no navegador como LESSou SASS...

Além disso, aqui está um script JavaScript simples, que altera o valor vermelho para azul:

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');

A 'Ruby Gem' para CSS parece incrível.

http://lesscss.org/

Sim, em um futuro próximo (eu escrevi isso em junho de 2012) você pode definir variáveis ​​nativas de css, sem usar menos / sass etc! O mecanismo Webkit acabou de implementar as primeiras regras de variáveis ​​css, portanto, as versões mais recentes do Chrome e Safari já devem trabalhar com elas. Veja 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 do navegador a variáveis ​​nativas de css nos próximos meses.

Não use variáveis ​​css3 devido ao suporte.

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

1. Use classes de cores 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-os dentro de um arquivo css separado para alterar conforme necessário.

Você pode passar o CSS por javascript e substituir todas as instâncias do COLOUR1 por uma determinada cor (basicamente regexá-la) e fornecer uma folha de estilo de backup, caso o usuário final tenha o JS desativado

Não sei ao certo por que você não pode usar PHP. Você pode simplesmente adicionar e usar variáveis ​​como desejar, salvar o arquivo como um arquivo PHP e vincular a esse 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é CSS (talvez) suportar coisas como variáveis?

Além disso, consulte o CSS orientado a objetos de Nicole Sullivan .

dicejs.com (formalmente cssobjs) é uma versão do cliente do SASS. Você pode definir variáveis ​​em seu CSS (armazenadas em CSS formatado em json) e reutilizar suas variáveis ​​de cores.

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

Considere usar o SCSS. É totalmente compatível com a sintaxe CSS, portanto, um arquivo CSS válido também é um arquivo SCSS válido. Isso facilita a migração, basta alterar o sufixo. Possui inúmeras melhorias, sendo as mais úteis variáveis ​​e seletores aninhados.

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

Sou desenvolvedor de CSS há muitos anos, mas desde que me forçei a fazer um projeto no SCSS, agora não vou usar mais nada.

Se você possui Ruby no seu sistema, pode fazer o seguinte:

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ê pode usar esse método independentemente do Rails, escrevendo um pequeno script de wrapper Ruby que funcione em conjunto com site_settings.rb e leve em consideração seus caminhos CSS, e que você pode chamar sempre que quiser gerar novamente seu CSS (por exemplo, durante a inicialização do site)

Você pode executar o Ruby em praticamente qualquer sistema operacional, portanto, isso deve ser bastante independente da plataforma.

por exemplo, wrapper: generate_CSS.rb (execute esse 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 , e.g. #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; }

Com certeza, graças ao maravilhoso mundo de várias classes, é possível:

.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.

Receio que não o 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 de cores de um arquivo xml simples. Em seguida, crie o css com um processador xslt.

colors.xml:

<?xml version="1.0"?>
<colors>
    <background>#ccc</background>
</colors>

styles.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
    <xsl:template match="/">body {
    background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>

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

styles.css:

body {
    background-color: #ccc;
}

Não é possível apenas com CSS.

Você pode fazer isso com JavaScript e LESS usando less.js , que tornarão variáveis ​​LESS em CSS ativas , mas é apenas para desenvolvimento e adiciona muita sobrecarga para uso na vida real.

O mais próximo que você pode chegar do CSS é usar um seletor de substring de atributos como este:

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

e defina os ids de todos os seus elementos com os quais você deseja ajustar os nomes que começam com colvar-, como colvar-header. Então, quando você altera a cor, todos os estilos de ID são atualizados. É o mais próximo possível do CSS sozinho.