Como usar Variáveis no CSS facilmente [HandsOn]

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:

  1. 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.

2. Feito isso, vamos importar o CSS em nosso arquivo, além de mudar a linguagem para pt-br e adicionar o título.

3. Agora, dentro do nosso body, criamos o h1 e o h2

4. Desta forma, abaixo do h2, nós vamos criar uma div com a class content

5. Dentro desta div, nós vamos ter nossos três cards, com as classes card-one, card-two e card-three

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.

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:

  1. Determinamos a cor do body como rgb(65, 65, 65).

2. inserimos a cor branca nos títulos.

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.

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.

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.

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

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.

8. Para o texto do centro, faremos a mesma configuração, porém dando um text-align: center

9. Faremos a mesma coisa com o card da direita, porém fazendo com que o texto dele fique à direita.

10. Para finalizar, vamos dar ao span que criamos no texto do card do meio, uma cor branca e um peso de fonte 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:

Para este:

É 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:

  1. Criamos o :root

2. Dentro dele, vamos criar nossas variáveis.

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:

4. Faremos agora com as demais cores:Com as bordas:

Com os textos:

Por fim, com o span:

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:

Para esta:

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!

5 2 votes
Article Rating
fevereiro 16, 2022
Subscribe
Notify of
guest
2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Wellington Ostemberg
7 meses atrás

Fantástica a iniciativa deste tipo de tutorial. Muito bem escrito e editado, fácil entendimento.

MARCOS AURELIO VERAS DA FONSECA
MARCOS AURELIO VERAS DA FONSECA
6 meses atrás

Show… muito bom esse material. Vai me ajudar demais em meus estudos. Parabéns aos idealizadores. Deus abençoe!!!

totslly free dating sites
2
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: