egoist
2/25/2016 - 6:14 AM

Differences in nesting between CSS Preprocessor and CSS spec.

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.