Compiled css from @extend is a little strange

[larz0]

.color-list {
    margin-top: 15px;

    li {
        float: left;
        position: relative;
        margin-top: 0px;

        .color-chip {
            box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
            border-radius: 2px;
            margin-bottom: 10px;
            margin-right: 10px;
            width: $color-chip-size;
            height: $color-chip-size;
            position: relative;
            cursor: pointer;
        }

        &:hover,
        &.selected,
        &.layer-over {
            z-index: 300;
            background-color: transparent;

            .color-chip {
                outline: none;
            }
        }
    }
}

.solid-color-list {
    @extend .color-list;
}

.gradient-list {
    @extend .color-list;
    margin-bottom: 26px;
}

Expected result:

.color-list, .solid-color-list, .gradient-list {
  margin-top: 15px; }
  .color-list li, .solid-color-list li, .gradient-list li {
    float: left;
    position: relative;
    margin-top: 0px; }
    .color-list li .color-chip, .solid-color-list li .color-chip, .gradient-list li .color-chip {
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      margin-bottom: 10px;
      margin-right: 10px;
      width: 27px;
      height: 27px;
      position: relative;
      cursor: pointer; }
    .color-list li:hover, .solid-color-list li:hover, .gradient-list li:hover, .color-list li.selected, .solid-color-list li.selected, .gradient-list li.selected, .color-list li.layer-over, .solid-color-list li.layer-over, .gradient-list li.layer-over {
      z-index: 300;
      background-color: transparent; }
      .color-list li:hover .color-chip, .solid-color-list li:hover .color-chip, .gradient-list li:hover .color-chip, .color-list li.selected .color-chip, .solid-color-list li.selected .color-chip, .gradient-list li.selected .color-chip, .color-list li.layer-over .color-chip, .solid-color-list li.layer-over .color-chip, .gradient-list li.layer-over .color-chip {
        outline: none; }

.gradient-list {
  margin-bottom: 26px; }

[jasonsanjose]

@larz0 thanks for the expected result. What was the actual result?

[larz0]

The actual result:

.color-list, .solid-color-list, .gradient-list {
  margin-top: 15px; }
  .color-list li, .color-list .solid-color-list, .color-list .gradient-list {
    float: left;
    position: relative;
    margin-top: 0px; }
    .color-list li .color-chip, .color-list li .solid-color-list, .color-list li .gradient-list {
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      margin-bottom: 10px;
      margin-right: 10px;
      width: 27px;
      height: 27px;
      position: relative;
      cursor: pointer; }
    .color-list li:hover, .color-list .solid-color-list, .color-list .gradient-list, .color-list li.selected, .color-list .solid-color-list, .color-list .gradient-list, .color-list li.layer-over, .color-list .solid-color-list, .color-list .gradient-list {
      z-index: 300;
      background-color: transparent; }
      .color-list li:hover .color-chip, .color-list li:hover .solid-color-list, .color-list li:hover .gradient-list, .color-list li.selected .color-chip, .color-list li.selected .solid-color-list, .color-list li.selected .gradient-list, .color-list li.layer-over .color-chip, .color-list li.layer-over .solid-color-list, .color-list li.layer-over .gradient-list {
        outline: none; }


.gradient-list {
  margin-bottom: 26px; }

The weird bit:

, .color-list li .solid-color-list,