nex3/sass — Issue #281: [sass-convert] Multiple parent selectors with double-colon pseudoelements problem
Author: kkoala
Created: 2012-02-17 19:04:56+00:00
State: open

Conversion from CSS to .sass/.scss produces wrong output when sass-convert combines a parent selector with double-colon-notation (CSS3) pseudoelements via `&`. This only occurs when there are more than one selectors with pseudoelements. See my example with the `a`element below.

Result:

1. The `parent::pseudoelement` selectors appear one level too deep.
2. One colon gets stripped, resulting in `parent:pseudoelement`.
3. at the level where they *should* be, a lone `&:` appears, throwing `Syntax error: Invalid CSS after "&:": expected pseudoclass or pseudoelement, was ""` when trying to compile back to CSS.

```css
/* input.css */

a {
color: #111;
}
a::foo,
a::bar {
color: #222;
}

b {
color: #111;
}
b:foo,
b:bar {
color: #222;
}

p {
color: #111;
}
p::foo {
color: #222;
}
```

```sass
/* output.sass */

// double-colon notation, more than one selector: wrong
a
color: #111
&:
&:foo, &:bar
color: #222

// single-colon notation: as expected
b
color: #111
&:foo, &:bar
color: #222

// double-colon notation, but only one selector: also as expected
p
color: #111
&::foo
color: #222
```