LESS các lớp lồng ghép CSS

Tôi đang sử dụng LESS để cải thiện CSS của mình và đang cố gắng lồng một lớp trong một lớp. Có một hệ thống phân cấp khá phức tạp nhưng vì một số lý do mà việc làm tổ của tôi không hoạt động. Tôi có cái này:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

Tôi không thể .g.postedlàm việc. nó chỉ hiển thị một .gchút. Nếu tôi làm điều này thì tốt:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

Tôi muốn lồng .postedvào .gmặc dù. Bất kỳ ý tưởng?

Thực ra, &ký tự này có chức năng của một thistừ khóa (một điều tôi không biết vào lúc viết câu trả lời). Có thể viết:

.class1 {
    &.class2 {}
}

và CSS sẽ được tạo sẽ giống như sau:

.class1.class2 {}

Về kỷ lục, @grobitto là người đầu tiên đăng thông tin này.

[CÂU TRẢ LỜI GỐC]

LESS không hoạt động theo cách này.

.class1.class2 {} - xác định hai lớp trên cùng một nút DOM, nhưng

.class1 {
    .class2 {}
}

định nghĩa các nút lồng nhau. .class2sẽ chỉ được áp dụng nếu nó là con của một nút với lớp class1.

Tôi cũng đã nhầm lẫn với điều này và kết luận của tôi là LESS cần một thistừ khóa :).

.g {
    &.posted {
    }
}

bạn nên thêm "&" trước .posted

Nếu dấu và nằm ngay bên cạnh phần tử con trong lồng ghép, nó được biên dịch thành một bộ chọn lớp kép. Nếu có khoảng trống giữa & và bộ chọn, nó sẽ được biên dịch thành bộ chọn con. Đọc thêm về lồng trong Ít hơn tại đây .