Please note that CSS Variables are not like SASS/LESS variables. They're actually custom properties that obey inheritance.

They're scoped to document rather than stylesheet, so you can override them in parts of the document just like you can override any CSS property.

Example from the spec:

    :root { var-color: blue; }
    div { var-color: green; }
    #alert { var-color: red; }
    * { color: var(color); }

    <p>I inherited blue from the root element!</p>
    <div>I got green set directly on me!</div>
    <div id='alert'>
      While I got red set directly on me!
      <p>I’m red too, because of inheritance!</p>
    </div>