Nested rule là gì?

Rule lồng nhau (nested rule) là một nhóm các thuộc tính CSS cho phép sử dụng các thuộc tính của một class này vào một class khác và bao gồm tên class làm thuộc tính của nó.

Ví dụ đây là file style.less

.container {
    h1 {
        font-size: 24px;
        color: red;
    }
    p {
        font-size: 24px;
        color: blue;
    }
    
    .myclass {
        h1 {
            font-size: 24px;
            color:red;
        }
        p {
            font-size: 24px;
            color:blue;
        }
    }
}

Sau khi biên dịch file style.less thành style.css ta được code sau:

.container h1 {
    font-size: 24px;
    color: red;
}
.container p {
    font-size: 24px;
    color: blue;
}
.container .MyClass h1 {
    font-size: 24px;
    color: red;
}
.container .MyClass p {
    font-size: 24px;
    color: blue;
}