高级SCSS结构：例如，动态变量取决于特定父类/外部类的存在

我试图找出是否可以实现以下逻辑，这将允许更模块化的方法：

挑战：

我的应用程序有三大类：跑步、游泳、骑自行车，每一类都有自己的主题/颜色，例如

scss：

在整个应用程序中，特定组件和嵌套组件应根据上下文的颜色（即其中一个类别的颜色）调整其背景颜色。以下是其中一个组成部分：

html:

背景色应根据父/祖父母/n-父

正在运行的情况动态设置。是否有任何方法可以动态获取“类别”

我可以为应该采用该主题/颜色的类添加后缀，比如
form\uuuuu header\u running
，但是我找不到一种方法来提取“running”作为变量，然后映射颜色

我尝试了下面这样的方法，但变量总是以某种方式结束，成为该链中的最后一个变量，这意味着“骑自行车”，即使父对象上不存在
biking

.form {
  $bgColor: black !default;

  .running & {
    $bgColor: map-get($category-colors, 'running')
  }

  .swimming & {
    $bgColor: map-get($category-colors, 'swimming')
  }

  .biking & {
    $bgColor: map-get($category-colors, 'biking')
  }

  &__header {
    height: 100px;
    background: $bgColor;
  }

  &__content {
    height: 50vh;
  }

  // image much more children/sub children, so the simple use of $bgColor would be much more efficient
}

关于如何实现我想要的东西，有什么想法/概念吗

对于具有类似需求的大型应用程序，您会选择哪种样式结构/架构

期待讨论
 检查这个答案，它对我有效：检查这个答案，它对我有效：
<div class="running">
    <div class="form">
        <div class="form__header">
            <h3>New</h3>
        </div>
        <div class="form__content">
            <p>Some text</p>
        </div>
    </div>
</div>

.form {
  &__header {
    height: 100px;

    // 'running' is not available here but it illustrates what I'm trying to achieve
    background: map-get($category-colors, 'running');
  }
  &__content {
    height: 50vh;
  }
}

.form {
  $bgColor: black !default;

  .running & {
    $bgColor: map-get($category-colors, 'running')
  }

  .swimming & {
    $bgColor: map-get($category-colors, 'swimming')
  }

  .biking & {
    $bgColor: map-get($category-colors, 'biking')
  }

  &__header {
    height: 100px;
    background: $bgColor;
  }

  &__content {
    height: 50vh;
  }

  // image much more children/sub children, so the simple use of $bgColor would be much more efficient
}