CSS variables aren't being set [duplicate]

问题

This question already has answers here:

How can I define colors as variables in CSS? (19 answers)

using css custom properties variables not working (4 answers)

Variables in CSS - why can't they be used? (2 answers)

Closed 11 days ago.

I'm unable to use CSS variables with any browser. I've tried using vscode, and codepen but I can't get the CSS variables to work. Also, I've tried enabling the flags in the Chrome browser and restarting my laptop but it still doesn't work.

Here's an image of the code on codepen using the variable for background color

And here's the same code except I'm hard coding the background color

Here's the code:

* {
  margin: 0;
  padding: 0;
}

 :root {
  --color-primary: #f9ed69;
  /*yellow color */
}

nav {
  margin: 30px;
  background-color: --color-primary;
}

<nav>
  <ul class="navigation">
    <li><a href="#">About</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="button">
    <a class="btn-main" href="#">Sign Up</a>
  </div>
</nav>

回答1:

You are missing the function var() when setting the CSS variable in the value, see more info about CSS Vars here

:root {
  --color-primary: #f9ed69; /*yellow color */
}

* {
  margin: 0;
  padding: 0;
}

nav {
  margin: 30px;
  background-color: var(--color-primary);
}

<nav>
  <ul class="navigation">
    <li><a href="#">About</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="button">
    <a class="btn-main" href="#">Sign Up</a>
  </div>
</nav>

来源：https://stackoverflow.com/questions/65118317/css-variables-arent-being-set