如何改进LESS代码以获得紧凑的CSS结果？

Question

我的尝试：

 .breadcrumb {
  &.main,
  &.path {
     & a:hover {
      color: red;
    }
  }
}

.left-sidepanel {
    .panel {
      &-heading,
      &-body a {
        color: red;
      }
    }
  }

结果：

.breadcrumb.main a:hover,
.breadcrumb.path a:hover {
  color: red;
}

.left-sidepanel .panel-heading,
.left-sidepanel .panel-body a {
  color: red;
}

所需结果

.breadcrumb.main a:hover,
.breadcrumb.path a:hover,    
.left-sidepanel .panel-heading,
.left-sidepanel .panel-body a {
  color: red;
}

我很感激你的想法。

Answer 1

.breadcrumb {
  &.main,
  &.path {
     a:hover {
      color: red;
    }
  }
}

.left-sidepanel {
    .panel {
      &-heading,
      &-body a {
        &:extend(.breadcrumb.path a:hover);
      }
    }
  }