Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usá-las para tornar seus códigos mais simples, flexíveis e otimizados!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que você vai ver hoje?
Variáveis no CSS (CSS Variables): A forma mais eficiente de escrever CSS
As variáveis no CSS, conhecidas como CSS Variables ou Custom Properties, são uma abordagem poderosa que ajuda a deixar seu código mais organizado, flexível e fácil de manter.
Nesta aula, vou te ensinar como criar variáveis no CSS, aplicá-las ao seu código e explorar os principais benefícios de utilizá-las. Com isso, seus projetos ficarão ainda mais completos e organizados.
No material disponível para download, você encontrará os códigos que usaremos como exemplo nesta aula. Eles incluem os arquivos da Landing Page desenvolvida no nosso curso gratuito de HTML e CSS.
Caso tenha interesse em acompanhar o processo completo de construção dessa landing page, confira o curso acessando a aula: Como Criar uma Landing Page – Curso de HTML e CSS
O Que São CSS Variables (Variáveis CSS)?
Variáveis CSS são propriedades personalizadas que podem ser reutilizadas em diferentes partes do seu código CSS. Elas são declaradas no seletor :root, que representa o elemento raiz de um documento, e acessadas com a sintaxe var().
As variáveis são definidas utilizando o prefixo — , seguido de um nome de variável, e seu valor é atribuído com a sintaxe de :, dessa forma:
:root {
--nome-da-variavel: valor;
}Essa abordagem torna as variáveis acessíveis globalmente, ou seja, todos os elementos da página podem utilizá-las.
Por exemplo, as cores de um projeto, como no caso da nossa landing page, podem ser organizadas assim:
:root {
--azul: hsl(202, 100%, 32%);
--azul-escuro: hsl(202, 100%, 17%);
--azul-claro: hsl(202, 100%, 50%);
--azul-claro-75: hsla(202, 100%, 50%, 0.749);
--preto: #050505;
--preto-50: rgba(5, 5, 5, 0.5);
--preto-80: rgba(5, 5, 5, 0.8);
--cinza-200: #7c7f7f;
--cinza-400: #333;
--cinza-500: #2e2e2e;
--cinza-600: #1c1c1c;
--cinza-700: #121212;
}Com as variáveis definidas, é possível utilizá-las em qualquer lugar dentro do arquivo CSS. Por exemplo:
button {
background-color: var(--azul);
color: inherit;
padding: 10px 30px;
border-radius: 100px;
border: 3px solid var(--azul-escuro);
border-right-width: 5px;
border-bottom-width: 5px;
cursor: pointer;
font-weight: 700;
text-transform: uppercase;
}Em vez de repetir os mesmos valores ao longo do código, você pode usar essas variáveis como um ponto de referência único para garantir consistência no estilo e facilitar a manutenção do projeto.
Alterando uma Variável
A grande vantagem de organizar seu código CSS com variáveis é que, com uma única alteração em uma variável, todas as regras de estilo que a utilizam serão automaticamente atualizadas.
Assim, você não precisa percorrer todo o código alterando cada regra individualmente.
Por exemplo, utilizando as variáveis declaradas anteriormente, podemos alterar facilmente a paleta de cores de todo o nosso site, modificando apenas as variáveis referentes as cores.
:root {
--azul: hsl(22, 100%, 32%);
--azul-escuro: hsl(22, 100%, 17%);
--azul-claro: hsl(22, 100%, 50%);
--azul-claro-75: hsla(22, 100%, 50%, 0.75);
--preto: #050505;
--preto-50: rgba(5, 5, 5, 0.5);
--preto-80: rgba(5, 5, 5, 0.8);
--cinza-200: #7c7f7f;
--cinza-400: #333;
--cinza-500: #2e2e2e;
--cinza-600: #1c1c1c;
--cinza-700: #121212;
}
Perceba como, de maneira prática e rápida, conseguimos alterar as cores de todos os elementos, sem a necessidade de percorrer e modificar cada regra individualmente.
Benefícios das Variáveis CSS
As variáveis CSS (também chamadas de custom properties) oferecem várias vantagens que ajudam a tornar o código mais eficiente, flexível e fácil de manter, como:
- Reutilização de valores: As variáveis permitem definir valores comuns, como cores, espaçamentos ou fontes, em um único lugar e reutilizá-los em diversos pontos do código. Isso reduz a duplicação e torna as mudanças globais mais simples.
- Facilidade de manutenção: Quando valores usados frequentemente mudam, é muito mais fácil alterá-los em um único local (como no seletor :root), sem a necessidade de localizar e substituir manualmente várias instâncias no código.
- Organização e consistência: O uso de variáveis ajuda a manter o design consistente em um projeto, evitando pequenas variações indesejadas em cores ou tamanhos. Você define os estilos dentro das variáveis e replica esses valores por todo o documento.
- Alteração dinâmica de valores: Variáveis CSS podem ser ajustadas dinamicamente com JavaScript ou alteradas em tempo de execução com estados CSS.
As variáveis CSS proporcionam reutilização, manutenção simplificada, flexibilidade e dinamismo no desenvolvimento. Isso torna seu código mais limpo, adaptável e preparado para mudanças.
Conclusão – Variáveis no CSS (CSS Variables): A forma mais eficiente de escrever CSS
As variáveis CSS oferecem uma solução poderosa para projetos modernos. Elas simplificam o gerenciamento de estilos, otimizam a consistência visual e reduzem o retrabalho.
Na aula de hoje, mostrei como as CSS Variables funcionam e como você pode aplicá-las em seus projetos para trazer mais flexibilidade e eficiência.
Seja em pequenos projetos ou aplicações robustas, adotar variáveis torna o CSS mais organizado e escalável.
Para dominar esse e outros conceitos importantes e levar seus projetos de desenvolvimento web para outro nível, confira o nosso Curso Completo HTML e CSS Impressionador.
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- TCP e UDP: o que são, diferenças e quando usar Entenda o que é TCP e UDP, as diferenças entre os protocolos, suas vantagens e quando usar cada um. Aprenda com exemplos práticos e linguagem acessível.
- Biblioteca NumPy: o que é, vantagens e como usar Aprenda como usar a biblioteca NumPy no Python para otimizar o processamento de dados e melhorar sua eficiência em projetos de ciência de dados.
- Power Apps: o que é, benefícios e como usar Descubra o que é Power Apps, como a ferramenta revoluciona a criação de aplicativos e como você pode começar a usá-la hoje mesmo!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.