Листић који ће вам помоћи да запамтите ЦСС прилагођена својства

ЦСС прилагођена својства, позната и као ЦСС променљиве, представљају прилагођена својства која се могу декларисати и позвати у вашем ЦСС-у.

Прогласите прилагођено својство у ЦСС-у

Да бисте пријавили прилагођено својство у ЦСС-у, морате користити --синтаксу:

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

Обратите пажњу на :rootселектор псеудо-класе - помоћу њега можемо глобално прогласити наше променљиве. Такође их можемо пријавити користећи друге селекторе и они ће тада бити обухваћени тим.

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

Користите прилагођено својство у ЦСС-у

Да бисте користили прилагођено својство ЦСС-а у свом ЦСС-у, можете користити var()функцију:

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

У овом случају, bodyимаће боју позадине tomato, али а body.theme-darkод lime.

Користите прилагођена својства без јединица

ЦСС прилагођена својства могу се декларисати без јединица ако се користе са calc()функцијом.

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

Користите прилагођена својства са ЈаваСцрипт-ом

Да бисмо добили прилагођено својство, можемо користити следеће:

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

Да бисте ажурирали вредност прилагођеног својства:

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

Пример добијања и замене вредности:

У следећем примеру користимо библиотеку контролера дат.гуи за промену вредности прилагођених својстава --сценеПерспецтиве, --цубеРотатеИ и --цубеРотатеКс. Ова метода олакшава примену новог стила, јер не морате да примените уграђени стил на сваки ДОМ елемент.

Хвала за читање!

Ресурси

Дефинисање прилагођених својстава: породица својстава - *

Прилагођена својства: ЦСС променљиве - МДН

вар () - МДН

Коришћење ЦСС прилагођених својстава (променљивих) - МДН

Можете прочитати више мојих чланака на мом блогу.