:root CSS variables are not set to element styles

Question

Please have a look at Stackblitz or the code below
Having a problem where variables from :root are not set to elements. But when I rename :root => .component. It works as expected. The box is shown.
Why :root variables are not set? Are not they are global or It is specificity problem?
Thanks in advance.

SCSS:

: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;
  }
}

Html:

<div class="component">
  <perfect-scrollbar id="main_content">
    <div class="scrollbarContent">
      <article id="profile">
        <div class="profileBox">
          <div class="profilePicture">
          </div>
        </div>
      </article>
    </div>
  </perfect-scrollbar>

</div>

compiled to css output :

: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; } }

Node-sass package is used to compile scss to css.

Cannot reproduce based on given code. Could you reproduce this in a Stack Snippet? — Paulie_D
– Paulie_D, Commented May 2, 2018 at 11:31
hi @Paulie_D. I have uploaded the file to stackblitz. Could you pls check there. It is ready to edit. — Vugar Abdullayev
– Vugar Abdullayev, Commented May 2, 2018 at 12:08
@Paulie_D . I see but stack snippet does not support scss which this questions related to. — Vugar Abdullayev
– Vugar Abdullayev, Commented May 2, 2018 at 12:15
If it actually problem relates to SCSS..but you don't know that it does....do you? Does it work in the compiled CSS? — Paulie_D
– Paulie_D, Commented May 2, 2018 at 12:16

llobet · Accepted Answer · 2018-05-02 16:57:57Z

1

SCSS and CSS4 variables behave different.

SCSS variables format:

$color: red;


.classRed{
  color: $color;
}

SCSS will compile to CSS this way:

.classRed{
  color: red;
}

CSS4 variables format:

:root{
  --color: red;
}

.classRed{
  color: var(--color);
}

CSS won't compile like SCSS since it is already CSS (it's using the variables CSS4 feature).

edited May 2, 2018 at 16:57

answered May 2, 2018 at 16:52

llobet

2,81027 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

:root CSS variables are not set to element styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related