Css 将sass变量应用于父元素的所有元素

我有一个不同组件的角度项目。我有一个包含所有颜色变量的base

\u colors.scss

。这些颜色被分解为“主题”。但是，如果从子元素中调用该变量，则颜色变量不会生效。有没有办法确保父主题类中的所有嵌套类都可以访问该变量

我的

\u colors.scss

文件：

.brand-one { $color-primary: red }
.brand-two { $color-primary: blue }
.brand-three { $color-primary: green }

我的角度组件的scss文件：

@import '../assets/scss/colors';

.brand-one {
  .header{
    background: $color-primary;
  }
}
brand-two {
.header {
  background: $color-primary;
}

brand-three {
.header {
  background: $color-primary;
}

---

但这是行不通的。有没有像

~

这样的特殊选择器我可以使用？

我认为您不应该在类中声明变量

颜色.scss

$color-brand-one: red;

组成部分

@import '../assets/scss/colors';

.brand-one {
  .header{
    background: $color-brand-one;
  }
}