SCSS 结构问题，涉及 child where parent changes

Question

例如我有一些html如下：

<body id="app_A">
<p>Hello World 1</p>
</body>

我想将文本着色为 <p> 蓝色，所以我想我可以按如下方式设置我的 SCSS 文件：

$blue: #00205C;
#app_A{
  p {
     color: $blue;
  }
}

但是，在我的网站中，body id 会随着页面的不同而变化，例如：

<body id="app_B">
<p>Hello World 2</p>
</body>

或

<body id="app_C">
<p>Hello World 3</p>
</body>

除了 <p> 之外，还有许多其他项目我希望根据 body id 进行颜色编码，但我可以看到即使使用 SCSS 也很难维护以下方法:

$blue: #00205C;
$red: #FF0000;
$green: #00FF0F;
#app_A{
  p {
     color: $blue;
  }
}
#app_B{
  p {
     color: $red;
  }
}
#app_C{
  p {
     color: $green;
  }
}

设置我的 SCSS 以设置 child 项目 (<p>) 的最佳方法是什么 parent 更改 <body id="{changing id}">？

Answer 1

我发现我可以通过使用@each 功能来做到这一点：

$blue: #00205C;
$red: #FF0000;
$green: #00FF0F;
$apps:
  "#app_A" $blue,
  "#app_B" $red,
  "#app_C" $green;

@each $app, $color in $apps {
    #{$app} {
        p {
            color: $color;
        }   
    } 
}

对于其他我想要颜色代码的项目，我可以将它们添加到 p{} 元素下。

SCSS 结构问题，涉及 child where parent changes

SCSS structure question, relating to child where parent changes

sass

parent-child