A função VAR no CSS | Explicado

A função VAR no CSS | Explicado
CSS é uma linguagem de estilo que consiste em muitos recursos distintos. Uma dessas características é que ele permite que seus usuários declarem propriedades personalizadas que também são chamadas de variáveis ​​CSS. Essas variáveis ​​consistem em nomes e valores específicos e, uma vez declarados, eles podem ser usados ​​em qualquer lugar do arquivo. Para usar essas variáveis, o CSS fornece uma função pelo nome var () função que vamos discutir em detalhes nesta redação. Este post inclui os seguintes tópicos.

1. função var ()

2. Vantagens da função var ()

A função var () no CSS

Com o objetivo de incluir uma propriedade personalizada ou uma variável CSS que possa ser usada em outras partes da folha de estilo, a função var () é usada.

Sintaxe

var () = var (-Nome do Property, valor da propriedade)

Parâmetros explicados

nome da propriedade: Especifica o nome da propriedade personalizada. É um parâmetro necessário.

Valor da propriedade: Especifica o valor da propriedade personalizada. É um parâmetro opcional.

Pontos para lembrar!

1. As regras CSS definem que as variáveis ​​CSS têm um escopo local ou global. Uma variável global pode ser usada em qualquer lugar do documento inteiro; Enquanto isso, uma variável local pode ser recuperada apenas pelo seletor em que é definido em.

2. Com o objetivo de criar uma variável global usando a função var (), ela deve ser declarada no: seletor de raiz

3. Enquanto isso, uma variável local pode ser criada dentro de qualquer seletor.

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

elemento dentro daquele contêiner div.

CSS

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

corpo
cor de fundo: var (-rosa);

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

P
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 criar 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

Vamos entender a função var () com outro exemplo.

Html

Digite seu nome:



Digite seu contato:



Digite seu e-mail: