Proprietățile personalizate CSS, cunoscute și sub numele de variabile CSS, reprezintă proprietăți personalizate care pot fi declarate și apelate în CSS.

Declarați o proprietate personalizată în CSS

Pentru a declara o proprietate personalizată în CSS, trebuie să utilizați -- sintaxă:

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

Observați :root selector de pseudo-clasă – ne putem declara variabilele la nivel global folosindu-l. De asemenea, le putem declara folosind alte selectoare, iar acestea vor fi apoi cuprinse în acelea.

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

Folosiți o proprietate personalizată în CSS

Pentru a utiliza o proprietate personalizată CSS în CSS, puteți utiliza var() funcţie:

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

În acest caz, body va avea o culoare de fundal de tomato, dar a body.theme-dark de lime.

Utilizați proprietăți personalizate fără unități

Proprietățile personalizate CSS pot fi declarate fără unități dacă sunt utilizate cu calc() funcţie.

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

Utilizați proprietăți personalizate cu JavaScript

Pentru a obține o proprietate personalizată, putem folosi următoarele:

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

Pentru a actualiza valoarea proprietății personalizate:

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

Exemplu de obținere și înlocuire a valorilor:

În exemplul următor, folosim bibliotecă controler dat.gui pentru a schimba valoarea proprietăților personalizate –scenePerspective, –cubeRotateY și –cubeRotateX. Această metodă facilitează aplicarea unui stil nou, deoarece nu trebuie să aplicați stilul inline pe fiecare element DOM.

Mulțumesc pentru lectură!

Resurse

Definirea proprietăților personalizate: familia de proprietăți – *

Proprietăți personalizate: variabile CSS – MDN

var () – MDN

Utilizarea proprietăților personalizate CSS (variabile) – MDN

Puteți citi mai multe din articolele mele pe blogul meu.