SASS cascades aren’t quite as smart as I wish they were

grid.scss

// 8-column grid where each columns is 12.5%

%grid {
  display: inline;
  float: left;
  clear: none;
}

%grid-2 {
  @extend %grid;
  width: 25%;
}

%grid-4 {
  @extend %grid;
  width: 50%;

  %grid-2 {
    width: 50%;
  }
}

article {
  @extend %grid-4;
  aside {
    @extend %grid-2;
  }
}

output.css

article aside, article {
  display: inline;
  float: left;
  clear: none;
}

/* This rule is redundant */
article aside {
  width: 25%;
}

article {
  width: 50%;
}

article aside {
  width: 50%;
}