:root CSS 变量未设置为元素样式

Posted 2023-03-05

【中文标题】:root CSS 变量未设置为元素样式

【英文标题】：:root CSS variables are not set to element styles

【发布时间】：2018-10-12 07:54:00

【问题描述】：

请查看Stackblitz 或下面的代码 有一个问题，来自 :root 的变量未设置为元素。但是当我重命名 :root => .component。它按预期工作。显示该框。 为什么:root 变量没有设置？它们不是全球性的还是特异性问题？ 提前致谢。

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>

编译成css输出：

: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 包用于将 scss 编译成 css。

【问题讨论】：

无法根据给定的代码进行复制。你能在 Stack Snippet 中重现这个吗？

嗨@Paulie_D。我已将文件上传到 stackblitz。你能在那里检查一下吗？可以编辑了。

@Paulie_D 。我看到了，但是 stack sn-p 不支持与此问题相关的 scss。

如果问题确实与 SCSS 有关..但您不知道它确实存在..是吗？它在编译后的 CSS 中有效吗？

这实际上是 node-sass 或 scss 相关问题。

【参考方案1】：

SCSS 和 CSS4 变量的行为不同。

SCSS 变量格式：

$color: red;


.classRed
  color: $color;

SCSS 会以这种方式编译成 CSS：

.classRed
  color: red;

CSS4 变量格式：

:root
  --color: red;


.classRed
  color: var(--color);

CSS 不会像 SCSS 那样编译，因为它已经是 CSS（它正在使用 variables CSS4 feature）。