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

Question

我的程序如下所示，如何使用父选择器和子选择器组合，它们共享通用css以实现更好的模块化文件。在下面的示例中，我有@theGoodThings，它将所有共享相同css的子类分隔为＆＃34;，＆＃34;。我不确定如何在下面的例子中使用@theGoodThings。欢迎任何其他建议。我找到了一个从less到css的在线编译器，我用它来生成css http://lesscss.org/less-preview/

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

    @seenByOrangeHighlight: #FFE8D2;
    @seenByOrangeLightHighlight: #FFF2E6;
    @collapsedOrangeHover: #FFDFC2;
    @theGoodThings: ~".seen-by-a, seen-by-b .seen-by-c, .seen-by-custom-color-2, .test-op";
    .highlight- {
      &seen-by-a .seen-by-a, &seen-by-b .seen-by-b, &seen-by-c .seen-by-c,
      &seen-by-custom-color-2 .seen-by-custom-color-2, &test-op .test-op {
          background-color: @seenByOrangeHighlight;
          &.non-user-resource {
              background-color: @seenByOrangeLightHighlight;
          }
      }
      &seen-by-a, &seen-by-b, &seen-by-c,
      &seen-by-custom-color-2, &test-op {
          &.collapsed-view {
              .table-row {
                  &.seen-by-a, &.seen-by-b, &.seen-by-c, &.seen-by-custom-color-2, &.test-op {
                      &:hover {
                         background-color: @collapsedOrangeHover;
                      }
                  }
              }
          }
      }
    }

<!-- end snippet -->

这将输出到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 -->