css global variables

1:root {
2  --main-bg-color: coral;
3}
4
5#div1 {
6  background-color: var(--main-bg-color);
7}
8
9#div2 {
10  background-color: var(--main-bg-color);
11}

1:root {
2	--global--color-primary: #28303d;
3}
4
5a {
6	color: var(--global--color-primary);
7}
8
9.social-icons a {
10	background: var(--global--color-primary);
11}

1/* "css variables" */
2/* not for ie but good for Edge and other browser :D */
3
4/*
5 By declaring a custom property on the :root pseudo-class
6 and using it where needed throughout the document
7*/
8:root {
9  --primary-bg: #8a2be2;
10  --btn-font-size: 18px;
11  --btn-padding: 10px 15px;
12}
13
14.btn-primary {
15  background-color: var(--primary);
16  font-size: var(--btn-font-size);
17  padding: var(--btn-padding);
18  color: #E2E2E2;
19}