CSS变量在使用Sass的媒体查询中不起作用

Question

通过媒体查询更改css varibable时遇到问题。
不应用媒体查询768px的样式。

   :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{
  #main_content {
    .scrollbarContent{
      article#profile {
        .profileBox {
          background-size: var(--profile-box-backgound-size);
          padding: var(--profile-box-p);
            .profilePicture {
              width: var(--profile-picture-size-w);
              height: var(--profile-picture-size-h);
              .photo {
                border: var(--profile-picture-border);
              }
            }
        }
        article#dateInfo {
          padding: var(--article-date-info);

        } }

      }
    }
  }

@media all and (min-width: 768px){
  --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;
  }
}

这也行不通：

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

但是当将此媒体查询放置在组件中时，它可以工作，但这次不会应用少于768px的属性。这么奇怪的问题。有什么想法吗？