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

Open
dadleyy opened this Issue Mar 29, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@dadleyy

dadleyy commented Mar 29, 2016

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.

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