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

Question

我有一个带有不同组件的 Angular 项目。我有一个包含所有颜色变量的基本_colors.scss。这些颜色被分解为"主题"。但是，如果从子元素中调用变量，则颜色变量不会生效。 有没有办法确保父主题类中的所有嵌套类都可以访问该变量？

我的_colors.scss文件 ：

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

我的 Angular 组件的 scss 文件：

@import '../assets/scss/colors';
.brand-one {
.header{
background: $color-primary;
}
}
brand-two {
.header {
background: $color-primary;
}
brand-three {
.header {
background: $color-primary;
}

但这行不通。是否有任何特殊的选择器，例如我可以使用的~？

Answer 1

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

颜色.scss

$color-brand-one: red;

元件

@import '../assets/scss/colors';
.brand-one {
.header{
background: $color-brand-one;
}
}