Câu hỏi LESS có tính năng “mở rộng” không?


SASS có một tính năng được gọi là @extend cho phép bộ chọn kế thừa các thuộc tính của bộ chọn khác, nhưng không sao chép các thuộc tính (như mixin).

LESS có tính năng này không?


76
2018-03-17 19:07


gốc


Để làm rõ, các tham chiếu câu hỏi khác KHÔNG yêu cầu cùng một điều. Câu hỏi này rất đơn giản: "Liệu LESS có một tính năng mở rộng?". Câu hỏi khác là hỏi một cái gì đó đòi hỏi nhiều suy nghĩ hơn về quyết định tạo kiểu tóc. - jonschlinkert
... để thêm vào nhận xét cuối cùng của tôi, câu hỏi khác bao gồm thẻ "kiểu mã hóa" hỗ trợ thêm điểm của tôi. - jonschlinkert


Các câu trả lời:


Có, giới thiệu Less.js extend trong v1.4.0.

:extend()

Thay vì triển khai quy tắc tại (@extend) cú pháp được SASS và Stylus sử dụng, LESS đã triển khai cú pháp lớp giả, cho phép thực thi LESS sự linh hoạt được áp dụng trực tiếp vào một bộ chọn, hoặc bên trong một câu lệnh. Vì vậy, cả hai đều sẽ hoạt động:

.sidenav:extend(.nav) {...}

hoặc là

.sidenav {
    &:extend(.nav);
    ...
}

Ngoài ra, bạn có thể sử dụng all chỉ thị để mở rộng các lớp "lồng nhau":

.sidenav:extend(.nav all){};

Và bạn có thể thêm danh sách các lớp được phân cách bằng dấu phẩy mà bạn muốn mở rộng:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

Khi mở rộng bộ chọn lồng nhau, bạn sẽ thấy sự khác biệt:

bộ chọn lồng nhau .selector1 và selector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

Hiện nay .selector3:extend(.selector1 .selector2){}; kết quả đầu ra:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){}; kết quả đầu ra:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

,.selector3:extend(.selector2){}; đầu ra

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

và cuối cùng .selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

135
2018-03-17 19:07



"Cú pháp của LESS" trung thành "với CSS truyền thống hơn so với quy tắc tại (@extend) cú pháp được SASS và Stylus thực hiện, thường được dành riêng để đưa ra hướng dẫn hoặc chỉ thị cho trình phân tích CSS trong trình duyệt. "<- điều này có nghĩa là gì? Mùi như tiếp thị nói. - cimmanon
cho chúng tôi tiếp tục cuộc thảo luận này trong trò chuyện - steveax
@cimmanon Tôi đoán bạn nói đúng, tôi không có ý nói theo cách đó. Nhưng có rất nhiều tranh cãi về cú pháp của Less, dường như bởi vì mọi người mong đợi Less sử dụng cú pháp giống như SASS. Nhưng trong CSS, bộ chọn giả được sử dụng cho các quy tắc khớp mẫu để xác định quy tắc kiểu nào áp dụng cho các phần tử trong cây tài liệu, trong khi các quy tắc được sử dụng cho chỉ thị "cấp cao hơn" (như tôi đã đề cập). Vì vậy, có lẽ tôi nên chỉnh sửa câu trả lời để cung cấp chi tiết đó? Hay là một câu hỏi khác: "Tại sao LESS chọn cú pháp giả-chọn?" - jonschlinkert
bạn thực sự nên cập nhật tài liệu trực tuyến ít hơn, tôi không thể thấy bất cứ điều gì về: extend () và nó sẽ là tốt để biết trước đó - Joshua Bambrick
Các tài liệu, như với mã, là cộng đồng được duy trì. Những loại đề xuất này sẽ tuyệt vời để có trên repo thực tế và yêu cầu kéo luôn được chào đón ;-) - jonschlinkert


Cách dễ dàng để mở rộng một hàm trong khung Ít hơn

.sibling-1 {
    color: red
}
.sibling-2 {
    background-color: #fff;
    .sibling-1();
}

Đầu ra

.sibling-1 {
  color: red
}
.sibling-2 {
  background-color: #fff;
  color: red
}

Tham khảo https://codepen.io/sprushika/pen/MVZoGB/


0
2018-04-09 06:38