E ai Programador, tudo bem? No tutorial de hoje, nós vamos aprender sobre como você pode utilizar variáveis no CSS.
O que são variáveis no CSS?
são propriedades definidas pelo desenvolvedor, contendo valores específicos para serem reutilizados ao longo do documento.
Sites grandes, acabam possuindo uma grande quantidade de CSS, sendo assim, repetindo vários valores de forma muito frequente. Utilizando as variáveis, nós podemos definir parâmetros padrões, e inserindo em todos esses valores repetidos.
Dessa forma, caso o desenvolvedor precise alterar algum valor, ele poderá mudar somente em um local, fazendo assim, com que mude em todas os locais que elas foram utilizadas.
Outro benefício de utilizar variáveis em seu projeto, é o fato de que é bem mais fácil uma semântica dos identificadores. Por exemplo, é mais fácil se entender um valor utilizado chamado de —principal-color do que #820AD1.
Passo a passo
1 – Criando o HTML
Vamos supor que você Programador, foi contratado por uma empresa X, e sua função seria criar um site com os cards desta empresa. Serão três cards, cada card terá um texto dentro deste card. porém com formatações de texto diferentes, o primeiro iniciando o texto a esquerda, o segundo o texto centralizado e o terceiro com o texto a direita. Além, disso, cada um dos cards terá um tamanho diferente.
Sabendo disso, faremos da seguinte forma:
- Vamos criar dois arquivos um chamado index.html e o outro chamado style.css, dentro de index.html nós vamos digitar html:5 e deixar que o autocomplete nós auxilie.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> |
2. Feito isso, vamos importar o CSS em nosso arquivo, além de mudar a linguagem para pt-br e adicionar o título.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Empresa X</title> </head> <body> </body> </html> |
3. Agora, dentro do nosso body, criamos o h1 e o h2
|
1 2 3 |
<h1>Empresa X</h1> <h2>Veja todos os nossos cards</h2> |
4. Desta forma, abaixo do h2, nós vamos criar uma div com a class content
|
1 2 3 4 |
<div class="content"> ... </div> |
5. Dentro desta div, nós vamos ter nossos três cards, com as classes card-one, card-two e card-three
|
1 2 3 4 5 6 7 8 9 |
<div class="content"> <div class="card-one"> </div> <div class="card-two"> </div> <div class="card-three"> </div> </div> |
6. Também vamos dentro de cada card, criar os p’s com as classes text-one, text-two e text-three, além disso, vamos passar os textos dentro deles. Ficando assim nossos cards.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="card-one"> <p class="text-one"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur facere, iure quia eum expedita aspernatur repellat! Eligendi, nulla quam? Odio unde facilis, quisquam eius doloribus quam earum voluptatum maiores tenetur. </p> </div> <div class="card-two"> <p class="text-two"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur facere, iure quia eum expedita aspernatur repellat! Eligendi, nulla quam? Odio unde facilis, quisquam eius <span>doloribus</span> quam earum voluptatum maiores tenetur. </p> </div> <div class="card-three"> <p class="text-three"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur facere, iure quia eum expedita aspernatur repellat! Eligendi, nulla quam? Odio unde facilis, quisquam eius doloribus quam earum voluptatum maiores tenetur. </p> </div> |
Utilizamos as classes, para que no arquivo styles.css nós possamos está adicionando os estilos para elas.
Desta forma, já temos o nosso HTML criado.
2 – Estilizando o HTML
Tendo pronto seu HTML, vamos supor que a Empresa X, também informou como queria o design de seu site. Querendo o background em uma cinza escuro, os cards, com as bordas na cor preta, e o conteúdo de dentro dos cards na cor amarela, além disso, ele gostaria de destacar uma determinada palavra do card central, utilizando também a cor branca.
Tendo essas informações, uma das formas que poderíamos fazer, seria a seguinte:
- Determinamos a cor do body como rgb(65, 65, 65).
|
1 2 3 4 |
body { background-color: rgb(65, 65, 65); } |
2. inserimos a cor branca nos títulos.
|
1 2 3 4 5 6 7 |
h1 { color: white; } h2 { color: white; } |
3. Damos um display flex para o content para que os cards fiquem lado a lado e também damos um justify-content: space-around para que eles tenham um espaço aos lados deles.
|
1 2 3 4 5 |
.content { display: flex; justify-content: space-around; } |
4. Para o card-one, damos uma largura e altura de 200px. além disso, damos uma borda com 4px de espessura, sólida e damos uma cor preta para ele.
|
1 2 3 4 5 6 |
.card-one { width: 200px; height: 200px; border: 4px solid black; } |
5. Para o card-two, damos uma largura e altura de 300px, damos também uma borda de 4px de espessura, sólida e a cor preta.
|
1 2 3 4 5 6 |
.card-two { width: 300px; height: 300px; border: 4px solid black; } |
6. Para o card-three, damos uma largura e altura de 250px, além disso damos uma borda de 4px de espessura, sólida e na cor preta
|
1 2 3 4 5 6 |
.card-three { width: 250px; height: 250px; border: 4px solid black; } |
7. Para o texto de dentro do card-one, vamos dar uma margem aos lados de 1vw. damos um text-align: start para que o texto fique à esquerda e também definimos a cor dele par amarelo.
|
1 2 3 4 5 6 |
.text-one { margin-inline: 1vw; text-align: start; color: yellow; } |
8. Para o texto do centro, faremos a mesma configuração, porém dando um text-align: center
|
1 2 3 4 5 6 |
.text-two { margin-inline: 1vw; text-align: justify; color: yellow; } |
9. Faremos a mesma coisa com o card da direita, porém fazendo com que o texto dele fique à direita.
|
1 2 3 4 5 6 |
.text-three { margin-inline: 1vw; text-align: end; color: yellow; } |
10. Para finalizar, vamos dar ao span que criamos no texto do card do meio, uma cor branca e um peso de fonte bold
|
1 2 3 4 |
span { color: white; font-weight: bold; } |
3 – Utilizando o root
Da forma que criamos, nosso site está teoricamente pronto. Ficando desta forma:
Porém, quando enviamos o nosso site para a Empresa X, a empresa nos retorna com algumas alterações, essas alterações seriam:
- Alterar os títulos da cor branca para uma cor tomate.
- Alterar os textos da cor amarela para a cor branca.
- Alterar a cor da palavra destacada de branco para uma cor tomate.
- Alterar a cor das bordas de preto para a cor laranja.
Desta forma, acabaria sendo muito trabalhoso trocá-las uma à uma, afinal, nesse pouco código de CSS que temos, podemos ver que repetimos algumas cores (imagine então em códigos grandes), sendo assim, com o uso das variáveis, se torna muito mais fácil esse trabalho.
Exemplo, nas cores dos textos, teríamos que trocá-los três vezes. Se tornando muito mais trabalhoso.
Deste trecho código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.text-one { margin-inline: 1vw; text-align: start; color: yellow; } .text-two { margin-inline: 1vw; text-align: justify; color: yellow; } .text-three { margin-inline: 1vw; text-align: end; color: yellow; } |
Para este:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.text-one { margin-inline: 1vw; text-align: start; color: white; } .text-two { margin-inline: 1vw; text-align: justify; color: white; } .text-three { margin-inline: 1vw; text-align: end; color: white; } |
É nesta hora que entra o uso das variáveis, podemos definir essas cores todas em um só local, e caso haja a necessidade de mudá-las novamente, podemos alterar somente em um canto, mudando assim todas. Confira:
- Criamos o :root
|
1 2 3 4 |
:root { } |
2. Dentro dele, vamos criar nossas variáveis.
|
1 2 3 4 5 6 7 |
:root { --title-color: white; --text-color: yellow; --span-color: white; --border-color: black; } |
3. Agora, basta nós substituirmos as cores do código pelo root criado. Por exemplo, onde tem a as cores dos títulos, no lugar de color: white, passamos color: var(–title-color). Ficando desta forma:
|
1 2 3 4 5 6 7 |
h1 { color: var(--title-color); } h2 { color: var(--title-color); } |
4. Faremos agora com as demais cores:Com as bordas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.card-one { width: 200px; height: 200px; border: 4px solid var(--border-color); } .card-two { width: 300px; height: 300px; border: 4px solid var(--border-color); } .card-three { width: 250px; height: 250px; border: 4px solid var(--border-color); } |
Com os textos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.text-one { margin-inline: 1vw; text-align: start; color: var(--text-color); } .text-two { margin-inline: 1vw; text-align: justify; color: var(--text-color); } .text-three { margin-inline: 1vw; text-align: end; color: var(--text-color); } |
Por fim, com o span:
|
1 2 3 4 5 |
span { color: var(--span-color); font-weight: bold; } |
5. Agora que criamos e inserimos as variáveis, basta irmos no root e fazer as alterações que a Empresa X solicitou.Desta forma:
|
1 2 3 4 5 6 7 |
:root { --title-color: white; --text-color: yellow; --span-color: white; --border-color: black; } |
Para esta:
|
1 2 3 4 5 6 7 |
:root { --title-color: tomato; --text-color: white; --span-color: tomato; --border-color: orange; } |
Sendo assim, podemos ver que todo conteúdo de nossa página foi alterado. E caso a Empresa X precise de novas alterações, não precisamos mudá-las uma a uma, basta alterá-las no root. Confira o resultado:
Curtiu o tutorial de hoje? Aposto que sim!
Se você quer se tornar um programador cada vez mais completo e entrar para o mercado de trabalho, te convido a conhecer o nosso treinamento Programador Full Stack Javascript.
É um treinamento completo, feito por nós aqui da OneBitCode, para poder te ajudar a seguir a carreira de Programador.
Nele você vai aprender tudo sobre o Front-End como HTML, CSS, Bootstrap, SaSS, JavaScript, TypeScript e React.
Assim como também irá aprender a utilizar o JavaScript no Back-end, com o NodeJS, o ExpressJS e também irá aprender sobre banco de dados. Ou seja, tudo para que você possa se tornar um programador completo!
Faça parte: https://programador.onebitcode.com
Te espero lá hein!
5 – Conclusão
Agora que você aprendeu a utilizar as variáveis em seus projetos, tenho certeza que você vai ser bem mais produtivo, caso a empresa ou cliente te peça algumas mudanças, não é mesmo?
Se você curtiu esse tutorial de hoje, não esquece de curtir, de compartilhar com seus amigos Programadores que tenho certeza que eles vão gostar bastante também. Ah e comenta também qual tipo de conteúdo você quer que nós do OneBitCode traga na próxima vez!
Te vejo no próximo tutorial Bons estudos!
Fantástica a iniciativa deste tipo de tutorial. Muito bem escrito e editado, fácil entendimento.
Show… muito bom esse material. Vai me ajudar demais em meus estudos. Parabéns aos idealizadores. Deus abençoe!!!