如何在较少的文件中使用共享公共css的父选择器和子选择器

我有我的less程序如下，我如何使用父选择器和共享公共css的子选择器组的组合来实现更好的模块化less文件。在下面的例子中，我有@theGoodThings，其中所有共享相同css的子类都用“，”分隔。我不确定如何在下面的例子中使用@theGoodThings。欢迎您提出任何其他建议。我找到了一个从less到css的在线编译器，我用它来生成css

@SeenByrangeHighlight:#FFE8D2；
@请参见以下要点：#FFF2E6；
@折叠范围悬停：#FFDFC2；
@好东西：~“.seen-by-a，seen-by-b.seen-by-c，.seen-by-custom-color-2，.test-op”；
.重点介绍-{
&被a看见，被b看见，被b看见，被c看见，被c看见，
&查看自定义颜色-2。查看自定义颜色-2和测试操作。测试操作{
背景色：@seenbyrangehighlight；
&.非用户资源{
背景色：@seenbyorlighthighlight；
}
}
&被a看到，被b看到，被c看到，
&查看自定义颜色2和测试操作{
&.折叠视图{
.表格行{
&.SEND-by-a、&.SEND-by-b、&.SEND-by-c、&.SEND-by-custom-color-2、&.test op{
&：悬停{
背景色：@collapsedOrangeHover；
}
}
}
}
}
}

这将输出到css，如下所示

<!-- language: lang-css -->

    .highlight-seen-by-a .seen-by-a,
    .highlight-seen-by-b .seen-by-b,
    .highlight-seen-by-c .seen-by-c,
    .highlight-seen-by-custom-color-2 .seen-by-custom-color-2,
    .highlight-test-op .test-op {
      background-color: #FFE8D2;
    }
    .highlight-seen-by-a .seen-by-a.non-user-resource,
    .highlight-seen-by-b .seen-by-b.non-user-resource,
    .highlight-seen-by-c .seen-by-c.non-user-resource,
    .highlight-seen-by-custom-color-2 .seen-by-custom-color-2.non-user-resource,
    .highlight-test-op .test-op.non-user-resource {
      background-color: #FFF2E6;
    }
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-a:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-b:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-c:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-a.collapsed-view .table-row.test-op:hover,
    .highlight-seen-by-b.collapsed-view .table-row.test-op:hover,
    .highlight-seen-by-c.collapsed-view .table-row.test-op:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.test-op:hover,
    .highlight-test-op.collapsed-view .table-row.test-op:hover {
      background-color: #FFDFC2;
    }

<!-- end snippet -->

.突出显示被看见，被看见，
.突出显示被看见b.被看见b，
.突出显示被看见的c.被看见的c，
.highlight-seen-by-custom-color-2.seen-by-custom-color-2，
.突出显示测试操作。测试操作{
背景色：#FFE8D2；
}
.highlight-seen-by-a.seen-by-a.non-user-resource，
.highlight-seen-by-b.seen-by-b.non-user-resource，
.突出显示被c看到。被c看到。非用户资源，
.highlight-seen-by-custom-color-2.seen-by-custom-color-2.non-user-resource，
.突出显示test op.test-op.non-user-resource{
背景色：#FFF2E6；
}
.highlight-seen-by-a.collapsed-view.table行.seen-by-a:hover，
.highlight-seen-by-b.collapsed-view.table行.seen-by-a:hover，
.highlight-seen-by-c.collapsed-view.table行.seen-by-a:hover，
.highlight-seen-by-custom-color-2.collapsed-view.table row.seen-by-a:hover，
.highlight-test-op.collapsed-view.表格行.被a看到：悬停，
.highlight-seen-by-a.collapsed-view.table行.seen-by-b:hover，
.highlight-seen-by-b.collapsed-view.table行.seen-by-b:hover，
.highlight-seen-by-c.collapsed-view.table行.seen-by-b:hover，
.highlight-seen-by-custom-color-2.collapsed-view.table row.seen-by-b:hover，
.highlight-test-op.collapsed-view.表格行.被b看到：悬停，
.highlight-seen-by-a.collapsed-view.table行.seen-by-c:hover，
.highlight-seen-by-b.collapsed-view.table行.seen-by-c:hover，
.highlight-seen-by-c.collapsed-view.table行.seen-by-c:hover，
.highlight-seen-by-custom-color-2.collapsed-view.table row.seen-by-c:hover，
.highlight-test-op.collapsed-view.表格行.被c看到：悬停，
.highlight-seen-by-a.collapsed-view.table row.seen-by-custom-color-2:悬停，
.highlight-seen-by-b.collapsed-view.table行.seen-by-custom-color-2:悬停，
.highlight-seen-by-c.collapsed-view.table行.seen-by-custom-color-2:悬停，
.highlight-seen-by-custom-color-2.collapsed-view.table行.seen-by-custom-color-2:hover，
.highlight-test-op.collapsed-view.表格行.seen-by-custom-color-2:悬停，
.highlight-seen-by-a.collapsed-view.table行。测试操作：悬停，
.highlight-seen-by-b.collapsed-view.table行。测试操作：悬停，
.highlight-seen-by-c.collapsed-view.table行。测试操作：悬停，
.highlight-seen-by-custom-color-2.collapsed-view.table行。测试操作：悬停，
.highlight-test-op.collapsed-view.table行。测试操作：悬停{
背景色：#FFDFC2；
}

这篇文章很可能会因为基于观点而被删除。请更改帖子并提出具体问题。谢谢您的建议。我已经修改了这个问题，我会更具体一些。“如何结合使用父选择器和@”？实现什么？解释你希望得到什么。@ScottMarcus更新了这个问题，我相信这对那些想制作无模块化文件的人来说更有意义和有用。只是一个建议-你可能应该重新审视一下你的HTML和你使用类的方式。这似乎太复杂了。（如果您显示您的标记，我们可以提出改进建议）。

<!-- language: lang-css -->

    .highlight-seen-by-a .seen-by-a,
    .highlight-seen-by-b .seen-by-b,
    .highlight-seen-by-c .seen-by-c,
    .highlight-seen-by-custom-color-2 .seen-by-custom-color-2,
    .highlight-test-op .test-op {
      background-color: #FFE8D2;
    }
    .highlight-seen-by-a .seen-by-a.non-user-resource,
    .highlight-seen-by-b .seen-by-b.non-user-resource,
    .highlight-seen-by-c .seen-by-c.non-user-resource,
    .highlight-seen-by-custom-color-2 .seen-by-custom-color-2.non-user-resource,
    .highlight-test-op .test-op.non-user-resource {
      background-color: #FFF2E6;
    }
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-a:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-a:hover,
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-b:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-b:hover,
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-c:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-c:hover,
    .highlight-seen-by-a.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-b.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-c.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-test-op.collapsed-view .table-row.seen-by-custom-color-2:hover,
    .highlight-seen-by-a.collapsed-view .table-row.test-op:hover,
    .highlight-seen-by-b.collapsed-view .table-row.test-op:hover,
    .highlight-seen-by-c.collapsed-view .table-row.test-op:hover,
    .highlight-seen-by-custom-color-2.collapsed-view .table-row.test-op:hover,
    .highlight-test-op.collapsed-view .table-row.test-op:hover {
      background-color: #FFDFC2;
    }

<!-- end snippet -->