Differences in nesting between CSS Preprocessor and CSS spec.
Expected output:
.foo .bar{
color: #333;
}
.foo.zoo {
color: #222;
}
In Sass/Less/Stylus:
.foo {
.bar {
color: #333;
}
&.zoo {
color: #222;
}
}
In CSS nesting (the new CSS spec feature):
.foo {
& .bar {
color: #333;
}
&.zoo {
color: #222;
}
}
For the new CSS spec, IMO, &
is just simply appending everything following to the selector in upper level.