Html 嵌套SCS和共享组样式有问题吗？

我有以下UI小部件，我正在创建：

区域供应
根据上一期间的变化量确定大小的圆圈
走廊净流向
根据上期净流量变化量确定的行大小
#地图键
{
.font{
&.标题{
字体大小：16px；
}
&.细节{
字体大小：12px；
}
}
/*
圆圈
{
宽度：14px；
高度：14px；
背景：浅灰色；
-moz边界半径：7px；
-webkit边界半径：7px；
边界半径：7px；
显示：内联块；
}
*/
.矩形
{
宽度：12px；
高度：10px；
背景：浅灰色；
}
.展示
{
&.inlineBlock{display:inline block}
}
#区域供应{
高度：100px；
宽度：240px；
边框：纯紫色1px；
显示：内联块；
填充：10px；
&.标题{
字体大小：16px；
}
&.细节{
显示：内联块；
宽度：100px；
字体大小：12px；
}
&.圆圈{
宽度：20px；
高度：20px；
背景：红色；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
}
}
#CorridorNetFlowDirection{
高度：100px；
宽度：240px；
边框：纯红1px；
显示：内联块；
填充：10px；
/*&.矩形{
宽度：50px；
高度：25px；
背景：蓝色；
}*/
&.细节{
显示：内联块；
宽度：100px；
字体大小：12px；
}
}
}
#地图键
{
.font{
&.标题{
字体大小：16px；
}
&.细节{
字体大小：12px；
}
}
/*
圆圈
{
宽度：14px；
高度：14px；
背景：浅灰色；
-moz边界半径：7px；
-webkit边界半径：7px；
边界半径：7px；
显示：内联块；
}
*/
.矩形
{
宽度：12px；
高度：10px；
背景：浅灰色；
}
.展示
{
&.inline块{display:inline block}
}
#区域供应{
高度：100px；
宽度：240px；
边框：纯紫色1px；
显示：内联块；
填充：10px；
&.标题{
字体大小：16px；
}
&.细节{
显示：内联块；
宽度：100px；
字体大小：12px；
}
&.圆圈{
宽度：20px；
高度：20px；
背景：红色；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
}
}
#CorridorNetFlowDirection{
高度：100px；
宽度：240px；
边框：纯红1px；
显示：内联块；
填充：10px；
/*&.矩形{
宽度：50px；
高度：25px；
背景：蓝色；
}*/
&.细节{
显示：内联块；
宽度：100px；
字体大小：12px；
}
}
}

circle SCS仅适用于RegionalSupply UI组件，但我似乎只能在RegionalSupply SCS之外定义类时才能使circle正常工作

---

此外，这两个UI组件应该具有相同的标题和细节样式。在SCS中实现这一点最优雅的方式是什么？由于某些原因，scss样式似乎没有得到应用。

您在

#regional supply

中有

和.circle

。这将生成

#区域供应。圆圈

您的代码似乎表明它需要

.RegionalSupply.circle

：

关于你的评论，我会做更多的解释

您正在执行

和.circle

。此处的&表示父选择器，允许附加或前置。如果只想将

.circle

的样式嵌套在

#RegionalSupply

中，只需删除&

例子 本SCSS：

#MyID {
  &.circle {
    height: 50px;
  }
}

#MyID {
  .circle& {
    height: 50px;
  }
}

#MyID {
  &-bigger {
    height: 100px;
  }
}

#MyID {
  .circle {
    border-radius: 50%;
  }
}

将生成此CSS：

#MyID.circle {
  height: 50px;
}

.circle#MyID {
  height: 50px;
}

#MyID-bigger {
  height: 100px;
}

#MyID .circle {
  border-radius: 50%;
}

---

当嵌套到某个级别时，不要这样选择：

&

我需要这样选择：

---

&>

您将RegionalSupply同时用作一个类和一个id，谢谢Jamie。我想我在尝试不同的方法使其发挥作用时添加了额外的“区域供应”参考。我从codepen.io中删除了额外的引用，但UI小部件仍然没有按照预期的方式进行样式设置。在我发布的codepen中，#RegionalSupply嵌套在#MapKeys中。顶级的区域供应属性（宽度、高度、边框等）正在得到应用。但是，未应用#RegionalSupply的子属性（标题、详细信息等）。scss中是否不支持三级嵌套，或者是否需要在scss中以不同的方式实现三级嵌套？@user7571529我编辑了我的答案，并提供了一些关于

&

如何影响生成的CSS的更多信息。您可以在SCS中尽可能地嵌套，尽管我建议不要这样做，以使生成的文件尽可能小。

#MyID.circle {
  height: 50px;
}

.circle#MyID {
  height: 50px;
}

#MyID-bigger {
  height: 100px;
}

#MyID .circle {
  border-radius: 50%;
}