WDD 130: Fundamentos da Web

S03 Atividades de Aprendizagem: Variáveis do CSS

Visão Geral

Variáveis do CSS são uma ferramenta poderosa para gerenciar o design de um site. Elas permitem criar valores reutilizáveis que podem ser usados na folha de estilo inteira, ajudando a manter a congruência do design. Esta atividade apresentará as variáveis CSS e como usá-las em seus projetos.

Os sites de empresas profissionais costumam ser grandes e complexos, utilizando as mesmas cores ou valores em vários locais no CSS. Caso esses valores precisem ser alterados no futuro, pode ser difícil encontrar e alterar tudo de forma consistente. Ao criar uma variável CSS personalizada, você pode definir o valor em um único lugar e usá-lo em todo o restante do CSS, facilitando a manutenção da consistência e a realização de alterações quando necessário.

Preparação

As variáveis em CSS são definidas usando dois traços seguidos por um nome, como --cor-principal. Você pode armazenar cores, tamanhos, fontes ou qualquer valor CSS em uma variável. Para usar a variável, você escreve var() com o nome da variável dentro dos parênteses.

As variáveis geralmente são definidas no seletor :root, que as torna disponíveis para uso em qualquer lugar do seu arquivo CSS. O seletor :root representa o nível superior do seu documento.

Definindo Variáveis CSS

Para criar uma variável CSS, você a define dentro de uma regra CSS, usando a sintaxe de dois traços. A prática mais comum é definir todas as suas variáveis no início do arquivo CSS, dentro do seletor :root.

• Os nomes das variáveis devem começar com dois traços (--).
• Os nomes das variáveis diferenciam maiúsculas de minúsculas, ou seja, --cor-principal e --Cor-principal são variáveis diferentes.
• Os valores das variáveis podem ser qualquer valor CSS válido.
• As variáveis globais são definidas em :root.

O exemplo a seguir mostra quatro variáveis definidas na raiz (root). As duas primeiras armazenam os valores de cor e as duas últimas armazenam as medidas de tamanho, que podem ser usadas para fontes e espaçamento.

:root {
  --cor-primaria: #3498db;
  --cor-secundaria: #2ecc71;
  --tamanho-da-fonte-grande: 24px;
  --margem-padrao: 16px;
}

Utilizando Variáveis CSS

Depois de definir as variáveis, você pode usá-las em qualquer lugar do seu CSS chamando a função var(). Dentro dos parênteses, escreva o nome da variável exatamente como você a definiu, incluindo os dois traços.

• A função var() recupera o valor de uma variável CSS.
• Valores alternativos podem ser fornecidos caso a variável não esteja definida.
• As variáveis podem ser usadas para qualquer valor de propriedade CSS.

No exemplo a seguir, as classes de cabeçalho e botão usam as variáveis que definimos anteriormente. Observe que o botão usa var(--cor-do-texto, white). Isso significa que, se a variável --cor-do-texto não estiver definida, será usada a cor branca como valor alternativo.

.header {
  background-color: var(--cor-primaria);
  font-size: var(--tamanho-da-fonte-grande);
  margin: var(--margem-padrao);
}

.button {
  background-color: var(--cor-secundaria);
  padding: var(--margem-padrao);
  color: var(--cor-do-texto, white);
}

Benefícios de Usar Variáveis CSS

As variáveis CSS oferecem diversas vantagens que deixam seu código mais organizado e fácil de usar. Elas ajudam a criar consistência em todo o seu site e tornam as alterações muito mais simples de implementar.

• Manutenção fácil – ao alterar um valor, ele é atualizado em todos os lugares.
• Consistência – os mesmos valores são usados em todo o seu projeto.
• Código legível – nomes significativos deixam o CSS mais fácil de entender.
• Atualizações dinâmicas – as variáveis podem ser alteradas com JavaScript.

Exemplo

Os exemplos a seguir mostram como as variáveis CSS podem ser definidas e usadas.

:root {
  --cor-de-fundo-do-titulo: #f06;
  --cor-do-texto-do-titulo: #333;
  --fonte-titulo: 'Montserrat', Helvetica, sans-serif;
  --padding: 1rem;
  --border: 1px solid rgb(0 0 0 / 0.1);
}

/* Alguns exemplos de uso de variáveis nas declarações. */

h1 {
  background-color: var(--cor-de-fundo-do-titulo);
  color: var(--cor-do-texto-do-titulo);
  font-family: var(--fonte-titulo);
  padding: var(--padding);
}

aside {
  margin: 10px auto;
  padding: var(--padding);
  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
}

Instruções da Atividade

1. No seu site principal wdd130, abra o arquivo estilos.css existente.
2. Crie uma regra :root {} na parte superior do arquivo.
3. Revise o CSS da sua página inicial do curso e procure cores, fontes, tamanhos e outros valores que são repetidos.
4. Substitua esses valores de propriedade CSS repetidos por variáveis CSS.
5. Teste sua página no seu navegador local usando o Live/Five Server.
6. Confirme (commit) e sincronize/envie (push) seu trabalho para seu repositório wdd130 habilitado para o GitHub Pages.
7. Compartilhe seu trabalho com outras pessoas no Microsoft Teams.