CSS Nesting native hoạt động thế nào?

CSS Nesting cho phép viết selectors lồng nhau trực tiếp trong CSS thuần, không cần preprocessor. & đại diện cho selector cha:

.card {
  & .title { font-size: 1.5rem; }
  &:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
}

Với relaxed syntax (Chrome 120+, Safari 17.2+, Firefox 117+), có thể bỏ & khi nesting element selectors: .card { h2 { ... } }.

Giảm lặp selector, giảm nhu cầu dùng SASS chỉ vì nesting.