Pronto? Se sim, vamos começar.
Introdução
Variáveis CSS são valores declarados em CSS para duas finalidades. O primeiro é a reutilização de tais valores. A segunda é reduzir a quantidade de código CSS. Vejamos um exemplo simples.
Elementos de estilização da página
.section {
border: 2px solid #235ad1;
}
.section-title {
color: #235ad1;
}
.section-title::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #235ad1;
}
Este exemplo CSS
#235ad1usa o valor três vezes. Imagine que isso seja parte de um projeto maior. Nele, estilos semelhantes estão espalhados por muitos arquivos CSS. Você foi solicitado a mudar a cor #235ad1. Em tal situação, a melhor coisa a fazer é usar a capacidade dos editores de código de localizar e substituir valores de string.
Mas usar variáveis CSS torna essas tarefas muito mais fáceis. Vamos falar sobre como declarar variáveis CSS. O nome da variável deve ser precedido por dois hifens. Vamos declarar uma variável de estilo para a
:rootpseudoclasse do elemento <html>:
:root {
--color-primary: #235ad1;
}
.section {
border: 2px solid var(--color-primary);
}
.section-title {
color: var(--color-primary);
}
.section-title::before {
/* */
background-color: var(--color-primary);
}
Na minha opinião, este código parece muito mais limpo do que o anterior. A variável
--color-primaryé global porque é declarada no estilo da pseudoclasse :root. Mas as variáveis CSS também podem ser declaradas no nível de elementos individuais, limitando seu escopo no documento.
Nomenclatura de variável
As regras para nomear variáveis CSS não são muito diferentes das regras usadas em várias linguagens de programação. Ou seja, um nome de variável CSS válido pode incluir caracteres alfanuméricos, sublinhados e hifens. Também é importante notar que os nomes dessas variáveis diferenciam maiúsculas de minúsculas.
/* */
:root {
--primary-color: #222;
--_primary-color: #222;
--12-primary-color: #222;
--primay-color-12: #222;
}
/* */
:root {
--primary color: #222; /* */
--primary$%#%$#
}
Escopo variável
Um recurso útil das variáveis CSS é que podem ter seu escopo definido. Essa ideia é baseada nos mesmos princípios que são aplicados em várias linguagens de programação. Por exemplo - em JavaScript:
let element = "cool";
function cool() {
let otherElement = "Not cool";
console.log(element);
}
Neste exemplo, a variável
elementé global, está disponível na função cool(). Mas a variável otherElementsó pode ser acessada a partir do corpo da função cool(). Vejamos essa ideia em relação às variáveis CSS.
:root {
--primary-color: #235ad1;
}
.section-title {
--primary-color: d12374;
color: var(--primary-color);
}
A variável
--primary-coloré global, você pode se referir a ela a partir de qualquer elemento do documento. Se você substituí-lo em um bloco .section-title, isso levará ao fato de que seu novo valor só pode ser usado neste bloco.
Aqui está um diagrama para explicar essa ideia.
Escopo das variáveis CSS
Esta é uma variável
--primary-colorusada para definir a cor dos títulos das seções. Precisamos personalizar a cor dos títulos das seções Autores em destaque e Artigos recentes. Portanto, nos estilos dessas seções, substituímos essa variável. A mesma coisa acontece com uma variável--unit. Aqui estão os estilos nos quais o diagrama anterior se baseia.
/* */
:root {
--primary-color: #235ad1;
--unit: 1rem;
}
/* */
.section-title {
color: var(--primary-color);
margin-bottom: var(--unit);
}
/* , */
.featured-authors .section-title {
--primary-color: #d16823;
}
/* , */
.latest-articles .section-title {
--primary-color: #d12374;
--unit: 2rem;
}
Usando valores substitutos
Normalmente, "valores de fallback" são usados para manter sites em execução em navegadores que não oferecem suporte a algum mecanismo CSS moderno. Mas aqui não vamos falar sobre isso, mas sobre como definir os valores usados no caso de as variáveis CSS necessárias não estarem disponíveis. Considere o seguinte exemplo:
.section-title {
color: var(--primary-color, #222);
}
Observe que
var()vários valores são passados para a função . O segundo ,, #222será usado apenas se a variável --primary-colornão estiver definida. Ao especificar valores substitutos, você também pode usar construções aninhadas var():
.section-title {
color: var(--primary-color, var(--black, #222));
}
Essa abordagem para trabalhar com variáveis pode ser útil se o valor de uma variável depender de alguma ação. Se acontecer de não haver valor em uma variável, é importante considerar o uso de um valor de fallback.
Exemplos e cenários para usar variáveis CSS
▍ Controle de tamanho de componente
Componentes de diferentes tamanhos
Os sistemas de design geralmente têm, por exemplo, botões de diferentes tamanhos. Via de regra, estamos falando de três tamanhos (pequeno, regular, grande). Usando variáveis CSS, é muito fácil descrever esses botões e outros elementos semelhantes.
.button {
--unit: 1rem;
padding: var(--unit);
}
.button--small {
--unit: 0.5rem;
}
.button--large {
--unit: 1.5rem;
}
Ao alterar o valor da variável
--unitno escopo correspondente ao componente do botão, criamos diferentes variantes do botão.
▍ Variáveis CSS e cores HSL
HSL (matiz, saturação, luminosidade - matiz, saturação, luminosidade) é um modelo de cor em que o componente H determina a cor e os componentes S e L determinam a saturação e o brilho da cor.
Cores de elementos especificadas usando HSL
:root {
--primary-h: 221;
--primary-s: 71%;
--primary-b: 48%;
}
.button {
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
transition: background-color 0.3s ease-out;
}
/* */
.button:hover {
--primary-b: 33%;
}
Observe como tornei a cor do botão mais escura diminuindo o valor da variável
--primary-b.
Se você está interessado no tópico do uso de cores em CSS - aqui está o meu artigo sobre ele.
▍ Redimensionar os elementos, mantendo as proporções
Se você já trabalhou em um programa de design como Photoshop, Sketch, Figma ou Adobe XD, então você deve saber como usar a tecla
Shiftao redimensionar objetos. Graças a esta técnica, você pode evitar distorcer as proporções dos elementos.
Não existe um mecanismo padrão para redimensionar elementos em CSS, mantendo a proporção de aspecto. Mas essa limitação pode ser contornada usando, como você pode imaginar, variáveis CSS.
Ajustando tamanhos de elementos usando variáveis CSS
Suponha que temos um ícone cuja largura e altura devem ser iguais. Para fazer isso, defini uma variável CSS
--sizee a usei para ajustar a largura e a altura do elemento.
.icon {
--size: 22px;
width: var(--size);
height: var(--size);
}
Como resultado, essa técnica simula o uso de uma chave
Shiftao redimensionar objetos. Basta alterar o valor de uma variável --size. Este tópico é abordado com mais detalhes aqui .
▍CSS Grid Based Layouts
Variáveis CSS podem ser extremamente úteis ao projetar layouts de página com base em CSS Grid. Imagine que você precise fazer o contêiner Grid renderizar filhos com base em uma largura predefinida dos elementos. Em vez de criar uma classe para cada apresentação de elemento, o que levaria à duplicação do código CSS, esta tarefa pode ser resolvida usando variáveis CSS.
Dimensionando elementos de grade usando uma variável CSS
.wrapper {
--item-width: 300px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
.wrapper-2 {
--item-width: 500px;
}
Com essa abordagem, você pode criar um layout de grade flexível adequado para uso em vários projetos, que é fácil de manter. A mesma ideia pode ser aplicada à definição de uma propriedade
grid-gap.
.wrapper {
--item-width: 300px;
--gap: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}
.wrapper.gap-1 {
--gap: 16px;
}
Usando a variável --gap para definir a propriedade grid-gap
Armazenamento em valores de variáveis com uma estrutura complexa
▍ Gradientes CSS
Por "valores com estrutura complexa", quero dizer, por exemplo, algo como gradientes. Se o projeto tiver um gradiente ou plano de fundo que é usado em muitos lugares no projeto, faz sentido armazenar suas descrições em variáveis CSS.
:root {
--primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}
.element {
background-image: var(--primary-gradient);
}
Em tais situações, é possível armazenar elementos individuais de valores "complexos" em variáveis. Este, por exemplo, pode ser o ângulo do gradiente:
.element {
--angle: 150deg;
background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}
.element.inverted {
--angle: -150deg;
}
Diferentes opções de gradiente criadas alterando a variável --angle
▍ Fundo de posição
Como já mencionado, as variáveis CSS podem armazenar valores complexos. Isso pode ser útil se você tiver um elemento que, dependendo do que está acontecendo, pode precisar ser colocado em locais diferentes na página.
Controlando a posição de um elemento usando a variável --pos
.table {
--size: 50px;
--pos: left center;
background: #ccc linear-gradient(#000, #000) no-repeat;
background-size: var(--size) var(--size);
background-position: var(--pos);
}
Alternar entre temas escuros e claros
Agora os sites, quase sem falha, são equipados com um tema escuro e claro. Para resolver este problema, você pode usar variáveis CSS, armazenando informações sobre as cores nelas e alternando entre elas após analisar os parâmetros do sistema ou configurações feitas pelo usuário.
Temas claros e escuros
:root {
--text-color: #434343;
--border-color: #d2d2d2;
--main-bg-color: #fff;
--action-bg-color: #f9f7f7;
}
/* , <html> */
.dark-mode {
--text-color: #e9e9e9;
--border-color: #434343;
--main-bg-color: #434343;
--action-bg-color: #363636;
}
Aqui está um vídeo de demonstração da ideia acima.
Configurando valores padrão
Em algumas situações, você precisa definir variáveis CSS usando JavaScript . Imagine que precisamos definir um valor de propriedade para um
heightelemento que pode ser redimensionado. Aprendi sobre essa técnica neste artigo.
A variável está
--details-height-openinicialmente vazia. Está previsto usá-lo na descrição do estilo de algum elemento. Deve conter a altura do elemento em pixels. Se você não puder definir o valor desta variável do JavaScript por algum motivo, é importante fornecer o uso de algum valor de fallback padrão.
.section.is-active {
max-height: var(--details-height-open, auto);
}
Neste exemplo, o valor padrão desempenha um papel
auto. Ele será aplicado se o JavaScript falhar em definir o valor da variável --details-height-open.
Ajustando a largura de um elemento de contêiner
Controlando a largura de um
elemento de contêiner Os elementos de contêiner usados em páginas da web podem ter tamanhos diferentes em situações diferentes. Talvez uma página precise de um contêiner pequeno e outra, de um contêiner maior. Nesses casos, as variáveis CSS podem ser usadas com sucesso para controlar o tamanho dos contêineres.
.wrapper {
--size: 1140px;
max-width: var(--size);
}
.wrapper--small {
--size: 800px;
}
Estilos Inline
Usar variáveis CSS em estilos embutidos pode abrir uma tonelada de novas possibilidades para desenvolvedores front-end que eles nunca souberam que existiam. Na verdade, escrevi um artigo inteiro sobre isso , mas ainda falarei aqui sobre as maneiras mais interessantes de usar variáveis em estilos embutidos.
Pode ser melhor não usar esses métodos na produção. Eles são muito adequados para prototipagem e para explorar várias idéias de design.
▍Elementos de grade dinâmica
Por exemplo, para ajustar a largura de um elemento, você pode usar uma variável
--item-widthdeclarada diretamente no atributo do elemento style. Essa abordagem pode ser útil ao criar protótipos de layouts de grade.
Aqui está o HTML para o elemento:
<div class="wrapper" style="--item-width: 250px;">
<div></div>
<div></div>
<div></div>
</div>
Aqui está o estilo aplicado a este elemento:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
Aqui você pode experimentar o exemplo desta seção.
▍ Avatares do usuário
Avatares de tamanhos diferentes
Outro uso interessante das variáveis CSS em estilos embutidos é a criação de elementos de tamanhos diferentes. Suponha que, em diferentes situações, precisemos exibir o avatar de um usuário de vários tamanhos. Dito isso, queremos controlar seu tamanho usando uma única variável CSS.
Aqui está a marcação:
<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />
Aqui estão os estilos:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
Vamos analisar esses estilos:
- Temos um design
var(--size, 1). Ele fornece um valor padrão. É usado se o valor da variável--sizenão for definido usando o atributo dostyleelemento estilizado. - O tamanho mínimo do elemento é definido como
30px*30px.
Consultas de mídia
Usar variáveis CSS e consultas de mídia juntas pode ajudar muito na personalização dos valores das variáveis usadas em todas as páginas do seu site. O exemplo mais simples de usar essa técnica que me vem à mente é ajustar o espaçamento entre os elementos:
:root {
--gutter: 8px;
}
@media (min-width: 800px) {
:root {
--gutter: 16px;
}
}
Como resultado, as propriedades de qualquer elemento que usa a variável
--gutterdependerão da largura da janela de visualização do navegador. Para mim, esta é uma grande oportunidade.
Herança
Variáveis CSS suportam herança. Se uma variável CSS for declarada no elemento pai, os elementos descendentes herdarão essa variável. Vejamos um exemplo.
Aqui está o HTML:
<div class="parent">
<p class="child"></p>
</div>
Aqui estão os estilos:
.parent {
--size: 20px;
}
.child {
font-size: var(--size);
}
O elemento
.childherda uma variável --sizedeclarada no estilo do elemento .parent. O item .childtem acesso a esta variável. Eu acho isso muito interessante. Talvez você agora esteja se perguntando como isso nos beneficiará. Acredito que o seguinte exemplo da vida real ajudará a responder a essa pergunta.
Herança de variáveis CSS
Há um grupo de botões com os seguintes requisitos:
- A capacidade de redimensionar todos os elementos definindo o valor de uma única variável.
- A distância entre os elementos deve mudar dinamicamente dependendo de seu tamanho. Com o aumento dos elementos, a distância entre eles aumenta e, com a diminuição, diminui.
Aqui está a marcação para este exemplo:
<div class="actions">
<div class="actions__item"></div>
<div class="actions__item"></div>
<div class="actions__item"></div>
</div>
Aqui estão os estilos:
.actions {
--size: 50px;
display: flex;
gap: calc(var(--size) / 5);
}
.actions--m {
--size: 70px;
}
.actions__item {
width: var(--size);
height: var(--size);
}
Observe como usei a variável
--sizeao definir a propriedade para os gapitens do Flexbox. Isso permite, com base em uma variável --size, alterar dinamicamente a distância entre os elementos.Outro
exemplo do uso do mecanismo de herança para variáveis CSS é a configuração de animações CSS. Peguei este exemplo daqui .
@keyframes breath {
from {
transform: scale(var(--scaleStart));
}
to {
transform: scale(var(--scaleEnd));
}
}
.walk {
--scaleStart: 0.3;
--scaleEnd: 1.7;
animation: breath 2s alternate;
}
.run {
--scaleStart: 0.8;
--scaleEnd: 1.2;
animation: breath 0.5s alternate;
}
Com essa abordagem, não precisamos declarar duas vezes
@keyframes. Estilos .walke .runvalores de variáveis herdados de substituição.
Validando Variáveis CSS
Se descobrir que
var()algo está errado com a variável CSS passada para a função , o navegador substituirá o valor dessa variável pelo valor original (herdado) da propriedade correspondente.
:root {
--main-color: 16px;
}
.section-title {
color: var(--main-color);
}
Aqui , o valor é escrito na variável
--main-colorusada para definir a propriedade . E isso está completamente errado. A propriedade é herdada. O navegador nesta situação funciona de acordo com o seguinte algoritmo:color16pxcolor
- A propriedade é herdável?
Veja como funciona o navegador.
Como o navegador funciona quando um valor de variável CSS inválido é detectado
▍Conceito de valor inválido aparecendo durante o cálculo
O que foi discutido acima, do ponto de vista técnico, é denominado "Inválido no Tempo do Valor Calculado". A situação em que tais valores aparecem ocorre quando uma
var()variável CSS válida é passada para a função , cujo valor não é adequado para escrever na propriedade que está sendo configurada com sua ajuda.
Considere o seguinte exemplo, que tirei deste artigo:
.section-title {
top: 10px;
top: clamp(5px, var(--offset), 20px);
}
Se o navegador não suportar a função
clamp(), ele usará o valor especificado na construção como um fallback top: 10px? Para responder a esta pergunta brevemente, não - não vai usá-lo. A razão para isso é que, no momento em que o navegador detecta um valor inválido que está tentando gravar em uma propriedade, ele terá descartado os outros valores, de acordo com a ordem dos estilos em cascata. Ou seja, ele simplesmente ignorará a construção top: 10px.
Aqui está o que a especificação CSS diz sobre isso :
O conceito de um valor inválido que aparece durante o cálculo existe porque os erros associados às variáveis não se manifestam, ao contrário de outros erros de sintaxe, nas fases iniciais de um sistema. Portanto, verifica-se que quando o agente do usuário descobrir que o valor de uma variável está incorreto, ele já descartará os demais valores, de acordo com a ordem dos estilos em cascata.
Como resultado, se você deseja usar recursos CSS que não são amplamente suportados por navegadores que são implementados usando variáveis CSS, você precisa aplicar a diretiva
@supports. É assim que é feito no artigo acima:
@supports (top: max(1em, 1px)) {
#toc {
top: max(0em, 11rem - var(--scrolltop) * 1px);
}
}
Achados interessantes
▍ Armazenamento de URLs em variáveis
Talvez alguns dos recursos usados em suas páginas da web precisem ser baixados de fontes externas. Em situações como essa, você pode armazenar a URL desses recursos em variáveis CSS.
:root {
--main-bg: url("https://example.com/cool-image.jpg");
}
.section {
background: var(--main-bg);
}
Neste ponto, pode surgir a questão de saber se é possível manipular construções de visualização
var(--main-bg)usando uma função CSS url(). Considere o seguinte exemplo:
:root {
--main-bg: "https://example.com/cool-image.jpg";
}
.section {
background: url(var(--main-bg));
}
Isso não funcionará, pois a função
url()interpreta toda a estrutura var(--main-bg)como uma URL, o que está errado. No momento em que o navegador calcular o valor, ele já estará incorreto, a construção considerada não funcionará conforme o esperado.
▍ Armazenamento de vários valores
Vários valores podem ser armazenados em variáveis CSS. Se esses forem valores que parecem estar no lugar onde você planeja usar a variável, essa construção funcionará. Vejamos um exemplo.
O valor da variável parece o esperado
Aqui está o CSS:
:root {
--main-color: 35, 90, 209;
}
.section-title {
color: rgba(var(--main-color), 0.75);
}
Há uma função
rgba()e valores RGB separados por vírgulas e armazenados em uma variável CSS. Esses valores são usados ao especificar a cor. Com essa abordagem de uso da função rgba(), o desenvolvedor tem a oportunidade de influenciar o valor correspondente ao canal alfa da cor, ajustando a cor de vários elementos.
A única desvantagem dessa abordagem é que a cor atribuída pela função
rgba()não pode ser ajustada usando as ferramentas de desenvolvedor do navegador. Se este recurso for importante ao trabalhar em seu projeto, a maneira acima de usar a função provavelmente não funcionará para você rgba().
Aqui está um exemplo de uso de uma variável CSS para definir uma propriedade
background:
:root {
--bg: linear-gradient(#000, #000) center/50px;
}
.section {
background: var(--bg);
}
.section--unique {
background: var(--bg) no-repeat;
}
Veja como estilizar duas seções do site. O fundo de um deles não deve ser repetido ao longo dos eixos
xe y.
▍ Alterando os valores das variáveis CSS no corpo da regra @keyframes
Se você leu as especificações sobre variáveis CSS, pode ter encontrado o termo "contaminado por animação" aqui. Ele descreve o fato de que os valores das variáveis CSS não se prestam a mudanças suaves na regra
@keyframes. Vejamos um exemplo.
Aqui está o HTML:
<div class="box"></div>
Aqui estão os estilos:
.box {
width: 50px;
height: 50px;
background: #222;
--offset: 0;
transform: translateX(var(--offset));
animation: moveBox 1s infinite alternate;
}
@keyframes moveBox {
0% {
--offset: 0;
}
50% {
--offset: 50px;
}
100% {
--offset: 100px;
}
}
A animação neste caso não será suave. A variável terá apenas três valores
0, 50pxe 100px. A especificação CSS diz que qualquer propriedade personalizada usada em uma regra @keyframesse torna uma propriedade contaminada por animação, o que afeta como ela é tratada pela função var()ao animar os elementos.
Se precisarmos fornecer uma animação suave no exemplo anterior, devemos fazê-lo como antes. Ou seja, você precisa substituir a variável pelas propriedades CSS do elemento que deseja animar.
@keyframes moveBox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
→ Aqui está um exemplo que
eu gostaria de observar que após a publicação deste artigo, fui informado que
@keyframesainda é possível animar variáveis CSS em . Mas para isso, as variáveis devem ser registradas usando a regra @property. Até agora, esse recurso é compatível apenas com navegadores baseados em Chromium.
@property --offset {
syntax: "<length-percentage>";
inherits: true;
initial-value: 0px;
}
Aqui você pode experimentar um exemplo desse recurso.
▍Cálculo
Você pode não estar ciente do fato de que variáveis CSS podem ser usadas em cálculos. Vamos dar uma olhada no exemplo que já vimos ao falar sobre avatares:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
O tamanho do avatar depende do valor da variável
--size. O padrão é 1. Isso significa que o tamanho padrão do avatar é 30px*30px. Observe os seguintes estilos e que alterar esta variável irá alterar o tamanho do avatar.
.c-avatar--small {
--size: 2;
}
.c-avatar--medium {
--size: 3;
}
.c-avatar--large {
--size: 4;
}
Ferramentas de desenvolvedor de navegador e variáveis CSS
Ao usar as ferramentas de desenvolvedor de vários navegadores, existem alguns truques úteis que podem ser usados para facilitar o trabalho com variáveis CSS. Vamos falar sobre eles.
▍ Visualização de cores definidas usando variáveis
Acho útil poder ver a cor descrita por uma variável CSS. Este recurso está disponível nos navegadores Chrome e Edge.
Veja a cor fornecida por uma variável CSS
▍ Valores calculados
Para ver o valor calculado de uma variável CSS, dependendo do navegador, mova o ponteiro do mouse sobre a variável ou clique em um botão especial.
Visualizando valores calculados
Em todos os navegadores, exceto Safari, os valores calculados podem ser visualizados simplesmente passando o mouse sobre uma variável. No Safari, você precisa clicar em um botão com algumas listras para fazer isso.
▍ Entrada automática
Ao trabalhar em grandes projetos, é difícil lembrar os nomes de todas as variáveis CSS usadas neles. Mas com os recursos de preenchimento automático disponíveis nos navegadores Chrome, Firefox e Edge, isso não é um problema.
Completar o nome da variável para que
este mecanismo funcione - basta começar a inserir o nome da variável.
▍ Desativar variáveis CSS
Se uma variável CSS precisa ser desabilitada de todos os elementos que a utilizam, basta desmarcar a caixa ao lado da variável no elemento em que está declarada.
Caixas de seleção para desativar as variáveis CSS
Resultado
Eu cobri bastante sobre variáveis CSS. Espero que você ache útil o que aprendeu hoje.
Você usa variáveis CSS em seus projetos?
