title: :root CSS variables are not set to element styles
body: <p>Please have a look at <a href="https://stackblitz.com/edit/angular-swpjwt?file=app%2Fapp.component.scss" rel="noreferrer">Stackblitz</a> or the code below <br>
  Having a problem where variables from :root are not set to elements. But when I rename <strong>:root</strong> => <strong>.component</strong>. It works as expected. The box is shown. <br> Why :root variables are not set? Are not they are global or It is specificity problem?<br>
  Thanks in advance.</p>
  
  <p>SCSS: </p>
  
  <pre><code>:host {
    display: block;
  }
  :root {
    --profile-picture-size-w: 9rem;
    --profile-picture-size-h: 9rem;
    --profile-picture-border: 1px solid #1e96a9;
    --profile-box-backgound-size: cover;
    --profile-box-p: 20px 0;
    --article-dateInfo: 3px;
  }
  
  .component{
    height: 500px;
    background: lightgray;
    #main_content {
      .scrollbarContent{
        article#profile {
          .profileBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--profile-box-p);
  
            .profilePicture {
              position: relative;
              width: var(--profile-picture-size-w);
              height: var(--profile-picture-size-h);
              background: cyan;
            }
          }
   }
      }
  
    }
  
  }
  
  @media all and (min-width: 768px){
    :root {
      --profile-picture-size-w: 5.5rem;
      --profile-picture-size-h: 5.5rem;
      --profile-picture-border: 5px solid #1e96a9;
      --profile-box-backgound-size: 100% 38%;
      --profile-box-p: 20px 0 0 0;
      --article-date-info: 0;
    }
  }
  </code></pre>
  
  <p>Html: </p>
  
  <pre><code>&lt;div class="component"&gt;
    &lt;perfect-scrollbar id="main_content"&gt;
      &lt;div class="scrollbarContent"&gt;
        &lt;article id="profile"&gt;
          &lt;div class="profileBox"&gt;
            &lt;div class="profilePicture"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/article&gt;
      &lt;/div&gt;
    &lt;/perfect-scrollbar&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>compiled to css output :</p>
  
  <pre><code>:host {
    display: block;
    height: auto;
    margin-left: auto;
    margin-top: 6px; }
  
  :root {
    --profile-picture-size-w: 9rem;
    --profile-picture-size-h: 9rem;
    --profile-picture-border: 1px solid #1e96a9;
    --profile-box-backgound-size: cover;
    --profile-box-p: 20px 0;
    --article-dateInfo: 3px; }
  
  .component {
    height: calc(100%); }
    .component #main_content .scrollbarContent article#profile .profileBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--profile-box-p); }
      .component #main_content .scrollbarContent article#profile .profileBox .profilePicture {
        position: relative;
        width: var(--profile-picture-size-w);
        height: var(--profile-picture-size-h);
        margin-top: 14px;
        background: cyan; }
  
  @media all and (min-width: 768px) {
    :root {
      --profile-picture-size-w: 5.5rem;
      --profile-picture-size-h: 5.5rem;
      --profile-picture-border: 5px solid #1e96a9;
      --profile-box-backgound-size: 100% 38%;
      --profile-box-p: 20px 0 0 0;
      --article-date-info: 0; }
    :host {
      height: 77vh; } }
  </code></pre>
  
  <p>Node-sass package is used to compile scss to css. <br></p>