title: :root variables not available on :before element
body: <p>I got a lot of css variables assigned to :root but these are not accessible inside my :before element. I'm not able to find anything on this online.</p>
  <p>When inspecting the parent of the :before element, i see all my :root variables in the bottom of the styles panel in google dev tools. See screenshots below.</p>
  <p>my css</p>
  <pre><code>    &amp;__meta {
      padding: 10px 0;
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 14px;
      color: var(--text-color);
  
      &amp;-author {
          margin-right: 15px;
      }
      &amp;-primary-cat:before {
          content: '';
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: var(--text-color);
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 5px;
      }
  }
  </code></pre>
  <p>chrome devtools parent css</p>
  <p><a href="https://i.stack.imgur.com/gkTTi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gkTTi.png" alt="" /></a></p>
  <p>chrome devtools :before css - all styles excluding the background-color are applied to the :before element as excepted</p>
  <p><a href="https://i.stack.imgur.com/FqfhL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FqfhL.png" alt="" /></a></p>