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

216

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.

patrick
fonte
Possível dup ... stackoverflow.com/questions/47487/...
Eddie
Isso pode ajudar: stackoverflow.com/questions/15831657/…
DreamTeK 30/09/16

Respostas:

225

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.

Arthur Weborg
fonte
3
Caso alguém mais leia isso e tente fazê-lo funcionar no Safari - o suporte para CSS parece ter sido removido do Webkit na primavera / verão de 2013. bugs.webkit.org/show_bug.cgi?id=114119 lists.webkit.org /pipermail/webkit-dev/2013-April/024476.html Ainda funciona no Chrome depois de ativar o sinalizador mencionado acima.
Marie Fischer
Testado no chrome 36, não funcionando mesmo com o sinalizador ativado. Ainda funciona com o firefox
yuvi
Só verifiquei com a versão 49.0.2623.110 me ainda não funciona.
Radu
Qual é o seu sistema operacional? Funcionou para mim: versão 49.0.2623.110 (64 bits) no Mac OS X
Arthur Weborg 7/16
Também trabalhei na versão Chrome do meu Android Android 5.1.0 Chrome 49.0.2623.105
Arthur Weborg 07/07
66

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
wheresrhys
fonte
3
Adicionar os comentários não funcionará em alguns casos, como ao usar filtros do IE. Não consigo colocar comentários aqui -> filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
Carter Medlin
1
Voto negativo porque você está certo, é uma solução terrível.
AndroidDev 29/05
Eu, pessoalmente, preferi o estilo de resposta do lado do cliente do que as soluções do lado do servidor, então criei algo para fazer isso. Não é surpreendente, mas funciona stackoverflow.com/a/44936706/4808079
Seph Reed
1
Sua resposta não é aceita. Você sempre pode excluí-lo se achar terrível.
TylerH
38

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.

singerwolfboy
fonte
12
Acho que a resposta está AGORA (2016) incorreta, não é? Embora eu ache que ainda seja melhor usar o SASS ou algo assim.
Codigoob 11/12/16
Usar CSS vars pode ser preferível ao SASS, porque com as cores do SASS só pode ser alterado estaticamente. Com CSS vars, as cores podem ser alteradas em tempo de execução, ou seja, você pode alternar para o "modo escuro" com um botão usando javascript.
Nick Crews
24

Você pode tentar variáveis ​​CSS3 :

body {
  --fontColor: red;
  color: var(--fontColor);
}
Vitalii Fedorenko
fonte
1
Nota: O prefixo da propriedade customizada foi alterado na especificação anterior, mas posteriormente alterado para -. O Firefox 31 e superior seguem as novas especificações. (bug 985838) developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_variables
tgf
20

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.

Corey Ballou
fonte
1
Mas e se o cliente decidir que deseja tornar todos os elementos vermelhos verdes? Você precisaria alterar a classe "vermelho" para fornecer "cor: verde", que fica confusa e difícil de manter.
Cantando Wolfwolf
@singingwolfboy, eu deveria ter sido mais específico na nomeação das classes. É mais fácil fazer referência a quais elementos eles pertencem, para que você possa modificá-los facilmente no futuro.
Corey Ballou
8
@ downvoters, esta é apenas uma solução CSS . Existem muitas soluções alternativas que envolvem scripts ou uma CLI, isto é para pessoas que não pretendem fazê-lo .
Corey Ballou
17

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

suporte ao navegador

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');
Alireza
fonte
9

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

http://lesscss.org/

Erin
fonte
2
Eu acho que a beleza do LESS é que não é Ruby ou qualquer estrutura específica. Ele pode ser 'compilado' do lado do cliente ou usado com qualquer outra estrutura como Django-css github.com/dziegler/django-css ou algo
xster
9

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.

Sliq
fonte
2
@Daniel Make that 2015
Still.Tony
4

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.

Eric Harms
fonte
3

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

Arcath
fonte
3

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 .

Stephenhay
fonte
Nem todos podemos usar PHP porque o trabalho exige que alguns de nós não o façam!
horiatu 02/02
3

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

John David Five
fonte
Essa ferramenta parece não estar mais disponível em 2014
Daniel
3

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.

superluminário
fonte
2

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
Tilo
fonte
2

Você pode agrupar seletores:

#selector1, #selector2, #selector3 { color: black; }
Botond Vajna
fonte
2

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.

Chalky
fonte
1
Eu acrescentaria: use nomes diferentes e mais semânticos. Se as cores da marca mudarem, você estará refazendo muito código html. Use nomes de classe como .primary, .secondary, .accent, etc. #
Eric Harms
2

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.

Jon Hadley
fonte
1

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;
}
Cole Tierney
fonte
0

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.

user2317093
fonte
Eu faço isso apenas com CSS, é com variáveis css Mozilla-exemplo
Arthur Weborg
isso é ótimo se todos os seus usuários estão usando mozilla - boa sorte com isso
user2317093
Funciona com chrome, safari e ópera também.
Arthur Weborg 11/11
pmsl O que há com as correções gramaticais exigentes do ensino médio em meu post pelo OP? Não foi tão ruim assim.
user2317093