New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

trouble with psuedo selectors in between block and element #9

dadleyy opened this Issue Mar 29, 2016 · 0 comments


None yet
1 participant

dadleyy commented Mar 29, 2016

With the element mixin only doing:

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

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

  display: block

    color: blue
    text-decoration: underline

      content: ">"

    float: left
    display: block

    /* on the last .breadcrumbs__item */

      /* any .breadcrumbs__link underneath */      

        /* those link's :after psuedo selector... */
          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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment