LESS có tính năng “mở rộng” không?

SASS có một tính năng được gọi là @extendcho phép một bộ chọn kế thừa các thuộc tính của một 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?

Có, Less.js được giới thiệu extendtrong v1.4.0 .

:extend()

Thay vì triển khai @extendcú pháp at-rule ( ) được sử dụng bởi SASS và Stylus, LESS đã triển khai cú pháp lớp giả, điều này mang lại cho việc triển khai của LESS sự linh hoạt có thể áp dụng trực tiếp cho chính bộ chọn hoặc bên trong một câu lệnh. Vì vậy, cả hai điều này sẽ hoạt động:

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

hoặc là

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

Ngoài ra, bạn cũng có thể sử dụng lệnh allnày để 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 tá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 các bộ chọn lồng nhau, bạn sẽ nhận thấy sự khác biệt:

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

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

Bây giờ .selector3:extend(.selector1 .selector2){};đầ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){};kết quả đầ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;
}

Cách dễ dàng để mở rộng một chức năng 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/