Bộ chọn Trẻ em ngay lập tức trong LESS

Có cách nào để LESS áp dụng bộ chọn con ngay lập tức (>) trong đầu ra của nó không?

Theo phong cách của tôi .less, tôi muốn viết một cái gì đó như:

.panel {
    ...
    > .control {
        ...
    }
}

và có LESS tạo ra một cái gì đó như:

.panel > .control { ... }

CẬP NHẬT

Trên thực tế, mã trong câu hỏi ban đầu hoạt động tốt. Bạn chỉ có thể gắn bó với >bộ chọn con.

Đã tìm ra câu trả lời.

.panel {
    ...
    >.control {
        ...
    }
}

Lưu ý thiếu khoảng cách giữa ">" và ".", Nếu không nó sẽ không hoạt động.

Cách chính thức:

.panel {
  & > .control {
    ...
  }
}

& luôn đề cập đến bộ chọn hiện tại.

Xem http://lesscss.org/features/#features-overview-feature-nested-rules

Cú pháp đúng sẽ được tuân theo trong khi sử dụng '&' sẽ là thừa ở đây.

.panel{
   > .control{
   }
}

Theo ít nguyên tắc hơn , '&' được sử dụng để tham số hóa tổ tiên (nhưng không cần thiết ở đây). Trong ví dụ nhỏ hơn này , &: hover là cần thiết đối với : hover, nếu không nó sẽ dẫn đến lỗi cú pháp. Tuy nhiên, không có yêu cầu cú pháp nào như vậy để sử dụng '&' ở đây. Nếu không, tất cả các lồng sẽ yêu cầu '&' vì về cơ bản chúng đang tham chiếu đến cha mẹ.

Trong trường hợp bạn cần nhắm mục tiêu nhiều bộ chọn hơn:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

Ngoài ra, nếu bạn đang nhắm mục tiêu phần tử con đầu tiên, chẳng hạn như phần tử đầu tiên <td>của a <tr>, bạn có thể sử dụng một cái gì đó như sau:

tr {
    & > td:first-child {font-weight:bold;}
}

điều này giúp giảm khai báo lớp khi chúng không cần thiết.