Parent selectors

[jamesfoster]

Parent selectors don't work as expected

a {
    & span { color: red; }
    div & { color: green; }
    p & span { color: blue; }
}

This should output something like the following:

a span { color: red; }
div a { color: green; }
p a span { color: blue; }

[jamesfoster]

any comments on this?

---

sass has depreciated using the parent selector anywhere but the start of an element. you used to be able to do the following:

.b {
    #header .a&.c { color: red; }
}

this would output:

#header .a.b.c { color: red; }

but now the & must at the front of the element, like:

.b {
    #header &.a.c { color: red; }
}

[cloudhead]

yea, that's how it works in less.js — it's essentially a combinator, like > and +, I think I'm going to leave it that way.

[jamesfoster]

you mean that's how it should work in less.js?

It didn't work at the point when I ported it to .NET and I haven't seen a commit which fixes it.

Did I miss something?

[cloudhead]

ok, I remember now: the & combinator in less.js isn't replaced by the parent rule, what it does is remove space before the selector, so:

.a { &.b { color: blue } }

will result in:

.a.b { color: blue }

but

.a { .b &.c { color: blue } }

will just become

.a .b.c { color: blue }

It's a very simple implementation, and if users want the full fledged thing I'll look into expanding its functionality, but this covers 90% of use-cases.

[jamesfoster]

Ahh that explains it. That's exactly what I'm seeing.

At the moment it covers 1 use case. But I agree, that's probably all 90% of people will use (since less.rb never supported this).

Your second example where .b &.c becomes .b.c I'd consider a failed spec. But I'm happy to ignore that test until you decide to implement it (unless I find the time to do it myself and you can back port it)

Thanks

[cloudhead]

Yea, but that is the expected behaviour, for now at least. I don't think it makes sense to say & is the parent selector, because that would mean:

.a { &.b { color: blue } }

should become:

.a .a.b { color: blue }

It's inconsistent otherwise...

[jamesfoster]

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_

[WraithKenny]

the LESSPHP version does something for this: http://leafo.net/lessphp/docs/#nested_blocks

I think the implementation detail is that when the parent selector is present, it's moved up a level or elevated in scope ( dropping ".a " from your ".a .a.a" rule) rather then being considered as a normal nested rule.

There'd be overhead maybe on a rule like "& .a" as it'd be the same result as a standard nested rule.

[monzonj]

This doesn't work as expected:

.container{
  .elem{
    .subcontainer  & {
       color: white;
    }
  }
}

the expected output I think should be:

.container .subcontainer .elem {
  color: white;
}

However, we get:

.subcontainer .container .elem {
  color: white;
}

[lukeapage]

That's not the expected output, & takes into account all parents