Este é o nono post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Neste artigo vamos te ensinar tudo sobre propriedades CSS personalizada, ou mais comumente conhecido por variáveis CSS.
Portanto, para seguir esse guia sem dificuldades, é necessário entender sobre a tecnologia CSS. Então recomendamos que também siga para o tutorial “O que é CSS” depois volte aqui. Pois assim ira absorver todo o conteúdo.
Conteúdo
Introdução a variáveis CSS
As variáveis CSS ou propriedades CSS personalizadas são recursos que permitem armazenamento de valores para uso posterior em todas as suas folhas de estilo. Isso é extremamente útil para evitar duplicação de código, além de ajudar a garantir que seu design seja consistente, e que seu desempenho seja otimizada.
Para definir uma variável CSS, use o formato “seletor{–nome-da-variavel: valor;}”. Para usá-la, basta chamar a variável com “seletor{color: var(–nome-da-variavel);}” em qualquer lugar do seu código CSS. Como já foi dito antes as variáveis permitem armazenar valores para serem usadas posteriormente em todo o CSS.
Em resumo, as variáveis CSS são uma ótima maneira de tornar o seu código CSS mais organizado e fácil de gerenciar, no entanto, esses não são os únicos benefícios de utilizar, veja logo em seguida porque deve aplicar isso em seu código.
Benefícios em usar variáveis CSS
Então, como existem vários benefícios em usar variáveis CSS em seu projeto, fizemos uma lista com algumas das vantagens:
-
Reutilização de código: Ao armazenar valores comuns em variáveis, você pode reutilizá-los em todo o seu código CSS, servindo para evitar a duplicação de código.
-
Facilidade de manutenção: Com as variáveis CSS, você pode mudar o valor de uma única variável em vez de procurar e alterar o mesmo valor em vários lugares em seu código. Isso ajuda a reduzir erros e torna a manutenção de seu código CSS muito mais fácil.
-
Melhor legibilidade do código: Ao usar variáveis para armazenar valores comuns, seu código CSS torna-se melhor de ler e entender, o que é útil para você e para outros desenvolvedores que trabalham em seu projeto.
-
Design mais consistente: Ao usar variáveis para gerenciar cores, medidas e outros valores em seu código, você pode garantir que seu design seja consistente ao longo de todo o seu site ou aplicação.
-
Melhor desempenho: O uso de variáveis CSS pode ajudar a melhorar a performance de seu site ou aplicação, pois permite que você evite a duplicação de código e evite o uso excessivo de classes e seletores.
Em suma, o uso de variáveis CSS são essenciais para seu código. Portanto, vamos aprender o que são, sua sintaxe e ver exemplos práticos.
O que são variáveis CSS?
No geral você armazena valores em uma variável para uso posterior em todas as suas folhas de estilo. É como ter uma variável em qualquer uma das linguagens de programação, assim você pode reutilizar em várias partes do seu código.
Por exemplo, você pode armazenar a cor principal de sua página em uma variável CSS e reutilizá-la em vários elementos em sua página. Se você decidir mudar a cor principal mais tarde, você só precisa mudar o valor na variável e ele será atualizado em todo o seu site.
Para ser aplicado em todo o seu código deve especificá-la em todo o seu elemento HTML, para isso usamos a Pseudo-classe root, vamos discutir mais.
No entanto, caso queira aplicar uma variável CSS somente em um determinado elemento e seus descendentes, é necessário seleciona-lo usando o seletor de classe, ID ou seletor de tipo, por exemplo: elemento{ –nome-da-variavel: valor; }. Em seguida, para usar a variável, basta chamar com var(–nome-da-variavel) dentro da propriedade desejada.
Escopo das variáveis CSS
Pseudo-classe root
Então a pseudo-classe :root no CSS é usada para selecionar o elemento raiz do documento HTML. O elemento raiz é o elemento HTML mais externo em uma página e geralmente é representado pela tag <html>.
Quando você define uma variável CSS dentro da pseudo-classe :root, ela torna-se uma variável global que pode ser acessada por qualquer elemento em sua página. Aqui está um exemplo de como usar a pseudo-classe :root para definir uma variável CSS global:
:root{
/*regras CSS (variaveis)*/
}
Lembre-se de que, ao definir uma variável CSS dentro da pseudo-classe :root, ela estará disponível para ser usada em toda a sua página. Isso significa que você pode reutilizar a mesma variável em vários lugares em seu código CSS sem precisar repetir o valor.
Variável CSS não global
Para definir uma variável CSS que se aplique somente a um elemento específico, basta selecionar o elemento desejado usando um seletor de classe, ID ou seletor de tipo antes da declaração da variável.
p{
/*regras CSS (variaveis)*/
}
Sintaxe das propriedades CSS personalizadas
A sintaxe para definir uma variável CSS é a seguinte:
Onde “nome-da-variavel” é o nome da variável e “valor” é o valor que você deseja armazenar na variável.
Para usar uma variável CSS em seu código, você deve usar a seguinte sintaxe:
Onde “elemento” é o elemento HTML que você deseja estilizar, “propriedade” é a propriedade CSS que você deseja aplicar e “var(–nome-da-variavel)” é a variável que você deseja usar.
Por exemplo, imagine que você tenha definido a variável –cor-principal com o valor #ff0000:
Em seguida, você pode usar a variável para aplicar a cor a um elemento HTML:
:root {
--nome-da-variavel: valor;
}
elemento {
propriedade: var(--nome-da-variavel);
}
Valores alternativos para variáveis CSS
Uma das vantagens de usar propriedades CSS é que você pode definir valores alternativos para quando a variável ainda não foi definida. Isso pode ser útil, por exemplo, quando uma variável depende de outra que ainda não foi definida ou quando você deseja fornecer um valor padrão caso a variável não seja definida.
Para isso, basta usar a função var() e fornecer um valor alternativo como segundo argumento, por exemplo: color: var(–nome-da-variavel, #000);. Isso garante que o valor será aplicado mesmo que a variável não esteja definida.
Uso básico das propriedades CSS personalizadas
Neste caso, estamos definindo duas variáveis CSS: –cor-principal e –cor-secundaria. A variável –cor-principal armazena a cor vermelha, enquanto a variável –cor-secundaria armazena a cor verde. Em seguida, estamos usando as variáveis para aplicar as cores aos elementos <body> e <h1>.
Dessa forma, a cor vermelha será aplicada ao fundo do elemento <body> e a cor verde será aplicada ao texto dos elementos <h1>. Se você quiser mudar as cores em algum momento, basta alterar os valores nas variáveis. Todos os lugares da sua folha de estilo onde você usou essas variáveis serão atualizados automaticamente.
:root {
--cor-principal: #ff0000;
--cor-secundaria: #00ff00;
}
body {
background-color: var(--cor-principal);
}
h1 {
color: var(--cor-secundaria);
}
Exemplos de códigos CSS:
Siga agora alguns modelos. Atente-se que estes são apenas alguns exemplos básicos de como usar variáveis CSS em seu código. Há muito mais coisas que você pode fazer com variáveis CSS e a sua criatividade é o único limite!
Exemplo 1: Definindo uma variável para uma cor:
Neste exemplo, estamos definindo uma variável –cor-principal para a cor vermelha. Em seguida, estamos usando a variável para aplicar a cor de fundo ao elemento <body>.
:root {
--cor-principal: #ff0000;
}
body {
background-color: var(--cor-principal);
}
Exemplo 2: Definindo uma variável para uma fonte:
Neste exemplo, estamos definindo uma variável –fonte-principal, nela passado como parâmetro propriedade fonte “Arial”. Em seguida, estamos usando a variável para aplicar a fonte ao elemento <body>.
:root {
--fonte-principal: "Times New Roman", sans-serif;
}
body {
font-family: var(--fonte-principal);
}
Exemplo 3: Definindo uma variável para uma margem:
Neste exemplo, estamos definindo uma variável –margem-padrao para uma margem de 20 pixels. Em seguida, estamos usando a variável para aplicar a propriedade customizada margem aos elementos <p>.
:root {
--margem-padrao: 20px;
}
p {
margin: var(--margem-padrao);
}
Dúvidas frequentes
Variáveis CSS são valores que podem ser definidos e reutilizados em todo o código CSS. Eles permitem que você defina um valor em um só lugar e use-o em vários lugares diferentes em seu código.
Para definir uma variável CSS, use a sintaxe “–nome-da-variável” seguida pelo valor que você deseja atribuir à variável. Por exemplo, para definir uma variável chamada “cor-primaria” como vermelho, você escreveria:
:root { –cor-primaria: vermelho; }
No CSS, :root é um seletor especial que se refere ao elemento raiz de um documento HTML. É o elemento mais alto na hierarquia do documento e normalmente é representado pelo elemento HTML.
Quando você usa :root em seu código CSS, você pode definir variáveis CSS e propriedades personalizadas que se aplicam a todo o documento.
Para usar uma variável CSS, você pode simplesmente se referir ao nome da variável onde quiser usar o valor correspondente. Por exemplo, para usar a variável “cor-primaria” em um seletor de CSS, você escreveria:
seletor { color: var(–cor-primaria); }
Conclusão sobre variáveis CSS
Em conclusão, as variáveis CSS são uma excelente maneira de tornar o seu código CSS mais organizado, reutilizável e fácil de manter. Ao usar variáveis, você pode guardar valores como cores, tamanhos, fontes e outros estilos usados repetidamente em seu site.
Se você precisar mudar esses valores em algum momento, basta alterar o valor na variável e todos os lugares em seu código onde a variável é usada serão atualizados automaticamente. Além disso, as variáveis também ajudam a manter a consistência de seu design, já que você pode usar as mesmas cores, tamanhos e outros estilos em várias partes do seu site.
Por fim, as variáveis CSS são uma ferramenta poderosa para qualquer desenvolvedor front-end que deseja tornar seu trabalho mais fácil e eficiente.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
