using css custom properties variables not working

Question

style sheet have very large amounts of CSS, often with a lot of repeated values. i read somewhere about variable in CSS . below my code is . but it is not working

element {
      --main-bg-color: brown;
    }

and i am using the variable here but it is not working

body {
  background-color: var --main-bg-color;
}

Answer 1

You did everything right, just keep the variables in (put variable here)

element {
  --main-bg-color: brown;
}
body {
  background-color: var(--main-bg-color);
}

Answer 2

var() notation works like a method

var(<custom-property-name>)

might consider putting your variables in a :root selector...

:root {
  --main-bg-color: brown;
}
/* The rest of the CSS file */
body {
  background-color: var(--main-bg-color);
}

:root is similar to global scope, but the element itself (ie body { --myvar: ... }) or ancestor elements (ie html { --myvar: ... }) can also be used to define variables