CSS - Variáveis

Local

<!-- index.html -->
<!-- Head starts -->
<style>
  .box {
    --box-background-color: brown;
  }

  .box-background {
    /* use --box-background-color variable if exists, else apply gay */
    background-color: var(--box-background-color, gray);
  }

  .square {
    width: 200px;
    height: 200px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="box box-background square"></div>
<!-- Body ends -->

Global

<!-- index.html -->
<!-- Head starts -->
<style>
  /* Declare global variables in root */
  :root {
    --box-background-color: brown;
  }

  .box-background {
    /* use --box-background-color variable if exists, else apply gay */
    background-color: var(--box-background-color, gray);
  }

  .square {
    width: 200px;
    height: 200px;
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="box-background square"></div>
<!-- Body ends -->