LESS'in "genişletme" özelliği var mı?

SASS, bir @extendseçicinin başka bir seçicinin özelliklerini, ancak özellikleri kopyalamadan (mixins gibi) devralmasına izin veren bir özelliğe sahiptir .

LESS de bu özelliğe sahip mi?

Evet, Less.js tanıtıldı extendiçinde v1.4.0 .

:extend()

@extendSASS ve Stylus tarafından kullanılan at-rule ( ) sözdizimini uygulamak yerine , LESS sözde sınıf sözdizimini uyguladı, bu da LESS uygulamasına ya doğrudan bir seçicinin kendisine ya da bir deyimin içinde uygulanma esnekliği verdi. Yani bunların ikisi de işe yarayacak:

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

veya

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

Ek olarak, allyönergeyi "iç içe geçmiş" sınıfları genişletmek için de kullanabilirsiniz :

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

Ve uzatmak istediğiniz virgülle ayrılmış bir sınıf listesi ekleyebilirsiniz:

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

İç içe geçmiş seçicileri genişletirken, farklılıkları fark etmelisiniz:

iç içe geçmiş seçiciler .selector1ve selector2:

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

Şimdi .selector3:extend(.selector1 .selector2){};çıktılar:

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

, .selector3:extend(.selector1 all){};çıktılar:

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

, .selector3:extend(.selector2){};çıktılar

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

ve son olarak .selector3:extend(.selector2 all){};:

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

Daha az çerçevede bir işlevi genişletmenin kolay yolu

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

Çıktı

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

Bakın https://codepen.io/sprushika/pen/MVZoGB/