trouble with psuedo selectors in between block and element

[Danny Hadley]

With the element mixin only doing:

@mixin element($name) {
  @at-root {
    &#{$element-separator}#{$name} {
      @content;
    }
  }
}

users are unable to make psuedo selectors on the containing block/element and then styles on an element underneath:

+block("breadcrumbs")
  +clearfix
  display: block

  +element("link")
    color: blue
    text-decoration: underline

    &:after
      content: ">"

  +element("item")
    float: left
    display: block

    /* on the last .breadcrumbs__item */
    &:last-child

      /* any .breadcrumbs__link underneath */      
      +element("link")

        /* those link's :after psuedo selector... */
        &:after
          display: none

would compile into:

/* ... */
.breadcrumbs__item:last-child__link:after { display: none; }

The element mixin should scan the parent selector (&) and strip out the anything but the original block or element.

See this example of the broken element mixin and this example of the smarter element mixin. Also this conversation on css-tricks.com.