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.

CSS Nesting allows writing nested selectors directly in plain CSS without a preprocessor, similar to SASS syntax. The & character represents the parent selector.

Example: .card { & .title { font-size: 1.5rem; } &:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } }. With relaxed syntax (Chrome 120+, Safari 17.2+, Firefox 117+), you can omit & when nesting element selectors: .card { h2 { ... } }. This makes CSS more readable, reduces selector repetition, and significantly reduces the need for SASS/SCSS just for nesting.