Adding a tag selector with & generates bad CSS

Looks like the parser just does a blind concatenation for nested selectors. Sometimes it should be more intelligent. For example:

.foo {
    .bar {
        &select {
            // stuff
        }
    }
}

generates:

.foo .barselect {
    // stuff
}

expected:

.foo select.bar {
    // stuff
}

My current workaround:

.foo {
    .bar {
    }
    select {
        @extend .bar;
    }
}

[nex3]

@SilentSpammer Support for selector& is being tracked in https://github.com/sass/sass/issues/1425. That said, it still won’t satisfy your use-case, because & will always inject the full parent selector, so you’ll get select.foo .bar. Here’s how I’d handle that:

@mixin unify-parent($selector) {
  @at-root #{selector-unify(&, $selector)} {
    @content;
  }
}

.foo .bar {
  @include unify-parent("select") {
    // stuff
  }
}

The selector-unify() function returns a selector that matches only elements matched by both its arguments, which looks like what you’re trying to express here.

[jzila]

Fair enough. Feel free to close the bug. At least now there’s a search result on GitHub that can help people who experience this issue.