2

Como posso adicionar valores pré-definidos em CSS? Como se fosse uma variável para armazenar.

Por exemplo, uma cor (hex ou RGB) para que eu pudesse usar no resto do documento, assim em vez de digitar o valor da cor, digitaria apenas o nome da "variável".

1

3 Respostas 3

3

Podes fazer isso criando classes especificas para isso.
Por exemplo, no teu CSS criares uma classe com o nome preto, e com o valor hex da cor preta:

.preto {color:#000;}

e no HTML basta chamares a classe da seguinte maneira:

.preto {color:#000;}
.vermelho {color:#ff0000;}
/* e por aí em diante ... */
<div class="preto">Olá, eu sou uma classe com o texto com a cor preta</div>
<div class="vermelho">Olá, eu sou uma classe com o texto com a cor vermelha</div>

1
  • 1
    Chun otima resposta, só adicione o um exemplo possa usar duas classes, pois este é o motivo do atributo class="" existir e a sua maior "vantagem". +1
    – Syzoth
    Commented 19/02/2016 às 18:04
3

Até o momento não é possível definir valores da mesma forma que estamos acostumados a declarar variáveis, pelo menos não de forma cross-browser. Uma forma de simular isto é criar classes que contém as propriedades que seriam aplicadas ao elemento, como mostrado pelo Chun.

Outra alternativa é fazer o uso de pré processadores, mas aí eu estaria fugindo do tema da pergunta que é declarar valores no próprio arquivo css.

Pois bem, há um projeto na especificação com o objetivo de tornar possível a declaração de variáveis em folhas de estilos, semelhante à forma que less e sass trabalham. E a atribuição do valor ficará por conta do atributo var(), e.g: background-color: var(--meu-bg).

O Firefox e o Chrome já possuem o recurso implementado, mas lembre-se que ainda é uma tecnologia em experimento. Nesse artigo da MDN há explicações mais objetivas sobre o motivo da implementação e quais problemas ela visa resolver.


Nota: No Chrome este recurso precisa ser ativado acessando a aba chrome://flags.


Se estiver usando o Firefox, o snippet abaixo funcionará e poderá ver o uso das variáveis em ação:

:root {
  --cor-links: red;
  --borda: 2px solid blue;
  --sombra: 0 0 10px 5px rgba(0,0,0,.5);
}

a {
  color: var(--cor-links)
}

div {
  border: var(--borda);
  box-shadow: var(--sombra);
}
<a href='#'>Meu Link vermelho</a>

<br><br>

<div>Meu div com borda azul e sombra.</div>

1
  • 1
    Excelente resposta Renan, só acho que talvez pra complementar seria legal adicionar uma lista com os tipos de pré processador (Ruby, JS, etc). Claro que é apenas uma sugestão e não interfere na qualidade da sua resposta. +1
    – Syzoth
    Commented 19/02/2016 às 18:23
-1

Sim, mas não diretamente no CSS.

Você deve implementar {LESS} ou Saas para conseguir.

Essas tecnologias suportam que você crie variáveis e logicas onde estas geram um css a partir de valores pré-definidos.

2
  • Não entenda mal, gostaria de saber em que a sua resposta tem que a do @Renan não tem? Espero que entenda como uma critica construtiva ;)
    – Syzoth
    Commented 19/02/2016 às 18:24
  • 1
    Nossa! Absolutamente nada de mais. Gafe minha, que não li a resposta do Renan. Até dei um +1 pra ele. Valeu @GuilhermeNascimento Commented 19/02/2016 às 18:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .