Modern CSS supports nesting: write .card { &:hover { … } .title { … } } directly. The & refers to the parent. It keeps related rules together and cuts repetition. It's the headline feature that lets many projects drop Sass entirely.
Modern CSS supports nesting: write .card { &:hover { … } .title { … } } directly. The & refers to the parent. It keeps related rules together and cuts repetition. It's the headline feature that lets many projects drop Sass entirely.
<!doctype html><html><head><meta charset="utf-8">
<style>.card{background:#140a28;color:#e6e0ff;padding:14px;& .title{color:#b388ff}&:hover{outline:1px solid #b388ff}}</style></head><body style="background:#06040d;padding:20px"><div class="card"><h3 class="title">nested rules</h3>hover me</div></body></html>