Um cheatsheet para ajudá-lo a lembrar as propriedades personalizadas CSS

As propriedades personalizadas CSS, também conhecidas como variáveis ​​CSS, representam propriedades personalizadas que podem ser declaradas e chamadas em seu CSS.

Declarar uma propriedade personalizada em CSS

Para declarar uma propriedade personalizada em seu CSS, você precisa usar a --sintaxe:

:root { --colorPrimary: hsla(360, 100%, 74%, 0.6); }

Observe o :rootseletor de pseudo-classe - podemos declarar nossas variáveis ​​globalmente usando-o. Também podemos declará-los usando outros seletores, e eles terão o escopo definido neles.

.theme-dark { --colorPrimary: hsla(360, 100%, 24%, 0.6); }

Use uma propriedade personalizada em CSS

Para usar uma propriedade personalizada CSS em seu CSS, você pode usar a var()função:

:root { --colorPrimary: tomato; } .theme-dark { --colorPrimary: lime; } body { background-color: var(--colorPrimary); }

Nesse caso, bodyterá uma cor de fundo de tomato, mas uma body.theme-darkde lime.

Use propriedades personalizadas sem unidades

As propriedades personalizadas do CSS podem ser declaradas sem unidades se forem usadas com a calc()função.

:root { --spacing: 2; } .container { padding: var(--spacing) px; /*Doesn't Work ?*/ padding: calc(var(--spacing) * 1rem); /*Will output 2rem ?*/ }

Use propriedades personalizadas com JavaScript

Para obter uma propriedade personalizada, podemos usar o seguinte:

getComputedStyle(element).getPropertyValue("--my-var"); // Or if inline element.style.getPropertyValue("--my-var");

Para atualizar o valor da propriedade personalizada:

element.style.setProperty("--my-var", newVal);

Exemplo de obtenção e substituição de valores:

No exemplo a seguir, usamos a biblioteca do controlador dat.gui para alterar o valor das propriedades personalizadas --scenePerspective, --cubeRotateY e --cubeRotateX. Este método facilita a aplicação de um novo estilo, pois você não precisa aplicar o estilo embutido em cada elemento DOM.

Obrigado por ler!

Recursos

Definindo propriedades personalizadas: a - * família de propriedades

Propriedades personalizadas: variáveis ​​CSS - MDN

var () - MDN

Usando propriedades personalizadas CSS (variáveis) - MDN

Você pode ler mais dos meus artigos no meu blog.