[DICA] Propriedades personalizadas - CSS

Propriedades Personalizadas no CSS

Boa noiteee! Hoje trouxe mais um conteúdo de CSS pra ajudar o pessoal: são as propriedades personalizadas.

O que são?

O CSS possui diversas propriedades para ajudar-nos a estilizar nossos sites da forma que quisermos. Mas e se eu quiser inventar uma propriedade que não está predefinida? Existe uma maneira de armazenar em nosso código propriedades criadas por nós mesmos. Estas são as propriedades personalizadas.

Como usá-las?

É simples. Para usar as propriedades personalizadas, basta criá-las utilizando -- antes da propriedade, e chamá-las posteriormente utilizando var(--nome-da-propriedade). Elas podem ser criadas tanto na raiz do código (seletor :root) quanto diretamente em um seletor específico (nesse caso, só poderão ser utilizadas para este seletor).

Segue um print para exemplificar:

image

Qual a finalidade de usar propriedades personalizadas?

Imagine que você está criando um site que utiliza a mesma cor, ou a mesma medida, para diversos elementos. Se no meio do caminho você decidir mudar essa cor, ou medida, você deverá mudar para todos os elementos que a utilizam. Com as propriedades personalizadas, basta alterar a propriedade em si, que todos elementos que utilizam a var(--nome-da-propriedade) seram alterados automaticamente.

Espero ter ajudado. Qualquer dúvida, só perguntar!

6 Likes

Um truque legal que pode ser utilizado com as cores na :root é usar o HSL (Hue, Saturation, Luminance) e depois colocar o primeiro valor (Hue) dentro de uma outra variável. Assim você consegue mudar a cor de todo o site mudando apenas o um único valor.

Mas atenção, se o valor do hue for diferente, será necessário realizar um cálculo simples para que essa diferença seja mantida, e para isso usamos uma outra função também.

Exemplo:

  • Abaixo segue um modelo comum:
:root {
    --cor-1: hsl(150, 100%, 50%);
    --cor-2: hsl(200, 100%, 50%);
}

­

  • Agora adicionando a variável na cor 1:
:root {
    --hue: 150;
    --cor-1: hsl( var(--hue), 100%, 50%);
    --cor-2: hsl(200, 100%, 50%);
}

­

  • E agora, para adicionar na cor 2 que possui um Hue diferente, basta fazer a continha da diferença. Neste caso, de 150 para 200, soma-se 50.
:root {
    --hue: 150;
    --cor-1: hsl( var(--hue), 100%, 50%);
    --cor-2: hsl( calc( var(--hue) + 50 ), 100%, 50%);
}

Parece complicado, mas é útil caso queira mudar a tonalidade do site inteiro mexendo apenas um valor. Você pode abrir o Inspect no navegador e ir mudando o Hue para enxergar em tempo real a mudança até encontrar a tonalidade de sua preferência.

4 Likes