extend-is-not-cool.md

.list {
  background-color: red;

  & .list-item {
    color: white;
    
    & .list-item-icon {
      margin-right: 5px;
    }
  }
}

.wh-list__icon {
  @extend .list-item-icon;
}

.wh-list__label {
 @extend .list-item;
}

This will bloat your css. Here the generated css result:

.list {
  background-color: red;
}
.list .list-item, .list .wh-list__label {
  color: white;
}
.list .list-item .list-item-icon, .list .wh-list__label .list-item-icon, .list .list-item .wh-list__icon, .list .wh-list__label .wh-list__icon {
  margin-right: 5px;
}