css custom properties

1:root {
2  --main-bg-color: pink;
3}
4body {
5  background-color: var(--main-bg-color);
6}

1/* create */
2:root {
3	--variable-name: variable-property;
4}
5/* use */
6selector {
7	property: var(--variable-name);
8}

1Values in JavaScript
2To use the values of custom properties in JavaScript, it is just like standard properties.
3// get variable from inline style
4element.style.getPropertyValue("--my-var");
5
6// get variable from wherever
7getComputedStyle(element).getPropertyValue("--my-var");
8
9// set variable on inline style
10element.style.setProperty("--my-var", jsVar + 4);
11

1// get variable from inline style
2element.style.getPropertyValue("--my-var");
3
4// get variable from wherever
5getComputedStyle(element).getPropertyValue("--my-var");
6
7// set variable on inline style
8element.style.setProperty("--my-var", jsVar + 4);
9