Variáveis de substituição de CSS
Substituir variável global com variável local
Na página anterior aprendemos que variáveis globais podem ser acessadas/usadas por todo o documento, enquanto variáveis locais podem ser usadas apenas dentro do seletor onde ela é declarada.
Veja o exemplo da página anterior:
Exemplo
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Às vezes queremos que as variáveis mudem apenas em uma seção específica da página.
Suponha que queremos uma cor diferente de azul para elementos de botão. Então, podemos declarar novamente a variável --blue dentro do seletor de botão. Quando usamos var(--blue) dentro deste seletor, ele usará o valor da variável local --blue declarado aqui.
Vemos que a variável --blue local substituirá a variável --blue global para os elementos do botão:
Exemplo
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--blue: #0000ff; /* local variable will
override global */
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
Adicionar uma nova variável local
Se uma variável deve ser usada apenas em um único lugar, também poderíamos ter declarado uma nova variável local, assim:
Exemplo
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding:
15px;
}
button {
--button-blue: #0000ff; /* new local
variable */
background-color: var(--white);
color: var(--button-blue);
border: 1px solid var(--button-blue);
padding: 5px;
}
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a
var()função.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Função CSS var()
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |