Ao escrever folhas de estilo CSS, você deve ter notado que muitas vezes precisa anotar alguns valores específicos, como a cor de vários elementos repetidamente. Portanto, para evitar esse CSS permite que seus usuários declarem variáveis ​​para certos valores de CSS e usá -los no código, em vez de anotar valores repetidamente. Essas variáveis ​​são chamadas de variáveis ​​CSS que discutimos em profundidade neste artigo. Os tópicos em discussão neste post são os seguintes.

1. Variáveis ​​em CSS
2. Vantagens do uso de variáveis ​​CSS
3. Declarando variáveis ​​Global e Local CSS
4. Valores de fallback
5. Variáveis ​​domésticas em CSS

Variáveis ​​em CSS

O CSS permite que seus usuários criem propriedades personalizadas que consistem em nomes e valores específicos que são chamados de variáveis ​​CSS. Essas variáveis ​​quando declaradas podem ser usadas sempre que necessário no documento.

Com o objetivo de declarar essas variáveis, você precisa seguir um certo conjunto de regras:

• O primeiro é que o nome da propriedade personalizada ou a variável CSS deve começar com hífens duplos.
• Estes são sensíveis ao minúsculo também, para que os cuidados especiais devem ser tomados.

Aqui está como nomear essas variáveis.

--Text-cor: azul;

Para acessar essas variáveis ​​em suas folhas de estilo, a função var () no CSS é usada. Aqui está como você usa a função var ().

var (-corporação de texto);

Vantagens do uso de variáveis ​​CSS

Abaixo, mencionamos algumas vantagens de usar variáveis ​​no CSS.

1. Ao criar um site muito complicado, você notará que seus valores CSS se repetirão com muita frequência. Portanto, para evitar anotar os mesmos valores várias vezes, você pode gerar uma variável CSS. Essas variáveis ​​são armazenadas em um só lugar e podem ser acessadas em qualquer outro lugar do arquivo.
2. Outra vantagem das variáveis ​​CSS ou propriedades personalizadas é que elas são fáceis de entender, uma vez que são declaradas pelos próprios desenvolvedores. Por exemplo, -Text -Color é muito mais compreensível que #0000FF.

Declarando variáveis ​​Global e Local CSS

As regras do CSS afirmam que as variáveis ​​CSS têm um escopo local ou global. Uma variável com escopo global pode ser usada sempre que necessário em todo o documento. Enquanto isso, uma variável com um escopo local pode ser recuperada apenas pelo seletor em que é definido em.

Com o objetivo de criar uma variável global usando a função var (), ela deve ser declarada no: seletor de raiz. Enquanto isso, uma variável local pode ser criada dentro de qualquer seletor.

Sintaxe

Para variáveis ​​com escopo global.

:raiz
--Padding principal: 5px

A sintaxe afirma que qualquer elemento que acessa a variável -Main -Padding através da função var () terá um preenchimento de 5px.

Para variáveis ​​com escopo local.

P
--Principal-Text-Color: Brown;
cor:--main-text-cor;

Agora, podemos usar a variável “-Main-text-cor” dentro do seletor “P” localmente e ter a cor marrom.

Exemplo 1

Suponha que você queira usar a função var () ao declarar variáveis ​​globais.

Html

Este é um parágrafo.

No trecho de código acima, simplesmente criamos um recipiente de div e aninhados e aninhados

elemento dentro daquele contêiner div.

CSS

:raiz
--Pink: #ffc0cb;
--Brown: #964B00;
--Azul: #0000FF;

div
Cor: var (-azul);
cor de fundo: var (-branco);
preenchimento: 15px;

H1
cor de fundo: var (-branco);
Cor: var (-azul);
borda: 3px var (-marrom);
preenchimento: 40px;

No código acima, definimos algumas variáveis ​​globais no: seletor de raiz, cada um correspondente a uma cor específica. Em seguida, estamos usando essas variáveis ​​globais em todo o documento, quando necessário, usando a função var (). A vantagem de fazer essas variáveis ​​globais e depois usá -las na função var () é que, nesse caso em particular, você não precisa definir cores de elementos repetidamente, apenas use a função var ().

Saída

A função var () está funcionando corretamente.

Exemplo 2
No exemplo abaixo, demonstramos como declarar e usar variáveis ​​CSS globais e locais.

Html

Este é um título.

Este é um parágrafo.

Aqui simplesmente criamos um recipiente de div e aninhou um título e um parágrafo dentro dele.

CSS

:raiz
--Pink: #ffc0cb;
--Brown: #964B00;
--Azul: #0000FF;

div
Cor: var (-azul);
cor de fundo: var (-rosa);
preenchimento: 15px;

H1
cor de fundo: var (-branco);
Cor: var (-azul);
borda: 3px var (-marrom);
preenchimento: 40px;

P
--roxo: #6a0dad;
Cor: var (-roxo);
borda: 2px var (-marrom);
Size da fonte: 16px;
preenchimento: 20px;

No código acima, criamos algumas variáveis ​​globais no: seletor de raiz e posteriormente usando -as através da função var () em todo o documento para estilizar nossos elementos. Enquanto isso, se você perceber que no p Seletor, criamos uma variável local pelo nome -purple para fornecer uma cor roxa apenas ao parágrafo. Esta variável local só pode ser acessada pelo seletor em que é declarado.

Saída

O parágrafo recebeu uma cor roxa com sucesso usando uma variável local.

Valores de fallback

Os valores de fallback são considerados substitutos, quando você deseja acessar uma variável CSS usando a função var (), no entanto, a declaração da variável é inválida ou se a variável ainda não foi declarada. Estes também são úteis ao usar elementos personalizados, ou Shadow Dom.

Com o objetivo de declarar valores de fallback, você precisa seguir um certo conjunto de regras que mencionamos aqui.

1. O primeiro parâmetro passado para a função var () deve ser o nome da propriedade personalizada que será usada como substituto.
2. O segundo parâmetro passado para a função deve ser um valor de fallback que atuará como um substituto da propriedade personalizada inválida.

Aqui está um exemplo.

div
Cor: var (-cor de texto, vermelho);

O snippet de código acima define que usam a cor vermelha, que é um valor de fallback como substituto da cor do texto se -text -cor não for declarado.

Agora que entendemos quais são as variáveis ​​no CSS, vamos para o nosso próximo tópico.

Variáveis ​​domésticas em CSS

Substituir uma variável é um fenômeno em que uma variável substitui outra. Agora que aprendemos a declarar variáveis ​​CSS com um escopo global ou um escopo local, vamos ver como podemos substituir essas variáveis ​​onde necessário.

Exemplo

Para demonstrar o procedimento de substituição, estamos usando o exemplo usado acima. Aqui, uma variável local substituirá uma variável global.

CSS

:raiz
--Pink: #ffc0cb;
--Brown: #964B00;
--Azul: #0000FF;

div
Cor: var (-azul);
cor de fundo: var (-rosa);
preenchimento: 15px;

H1
cor de fundo: var (-branco);
Cor: var (-azul);
borda: 3px var (-marrom);
preenchimento: 40px;

P
--Azul: #000080;
Cor: var (-azul);
borda: 2px var (-marrom);
Size da fonte: 16px;
preenchimento: 20px;

O que fizemos no código acima é que declaramos uma variável global -azul e estamos utilizando -o para estilizar alguns elementos. No entanto, quando se trata do

Elemento que queremos dar um tom diferente da cor azul, então dentro do seletor P estamos definindo uma variável local com o mesmo nome "-blue", mas tem um valor diferente. Portanto, essa variável local substituirá a variável global.

Saída

Uma cor da marinha foi fornecida ao parágrafo usando uma variável local.

Conclusão

O CSS permite que seus usuários criem propriedades personalizadas que consistem em nomes e valores específicos que são chamados de variáveis ​​CSS. Essas variáveis ​​podem, mais tarde, ser usadas em toda a folha de estilo. Além disso, eles têm um escopo global ou um escopo local e podem ser acessados ​​usando a função var (). Você pode evitar escrever valores repetidos de CSS usando essas variáveis, além disso, são mais fáceis de entender. Também é possível substituir as variáveis ​​CSS entre si. Neste artigo, discutimos variáveis ​​CSS e como substituí-las em detalhes usando vários exemplos.