У LESS есть функция "расширения"?

Ответ 1

Да, Less.js представил extend в v1.4.0.

:extend()

Вместо реализации синтаксиса at-rule (@extend), используемого SASS и Stylus, LESS реализовал синтаксис псевдокласса, который дает LESS-реализацию гибкость, которую можно применить либо непосредственно к селектору, либо внутри оператора, Поэтому оба они будут работать:

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

или

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

Кроме того, вы можете использовать директиву all для расширения "вложенных" классов:

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

И вы можете добавить список классов, которые вы хотите расширить:

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

При расширении вложенных селекторов вы должны заметить различия:

вложенные селектора .selector1 и selector2:

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

Теперь .selector3:extend(.selector1 .selector2){}; выдает:

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

.selector3:extend(.selector1 all){}; выходы:

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

.selector3:extend(.selector2){}; выходы

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

и, наконец, .selector3:extend(.selector2 all){};:

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