"&" selects all parent selectors, how can I instead only select the nearest ancestor

[hawkerboy7]

Hi!

The "&" parent selector works as expected (I assume), but does not seem to be able to support the output I'd like to have instead.

.test {
  &--foo {
    .bar {
      &:first-child:nth-last-child(3),
      &:first-child:nth-last-child(3) ~ & {
        width: 33.3333%;
      }
    }
  }
}

Current output:

.test--foo .bar:first-child:nth-last-child(3),
.test--foo .bar:first-child:nth-last-child(3) ~ .test--foo .bar {
  width: 33.3333%;
}

Output I'd like to get:

.test--foo .bar:first-child:nth-last-child(3),
.test--foo .bar:first-child:nth-last-child(3) ~ .bar {
  width: 33.3333%;
}

Is there another character or something I can change so it will only select the nearest ancestor .bar as the value instead of taking the whole tree up?

I am using this mixin, which works inside .test--foo, but not within .test--foo .bar.
It allows for changing the children's css based the child count.

.with-count(@n, @content) when (@n = 1) {
	&:first-child:nth-last-child(1) {
		@content();
	}
}
.with-count(@n, @content) when (@n > 1) {
	&:first-child:nth-last-child(@{n}),
	&:first-child:nth-last-child(@{n}) ~ & {
		@content();
	}
}