Чи МЕНШ має функцію "розширення"?

SASS має функцію, @extendяка називається, що дозволяє селектору успадковувати властивості іншого селектора, але без копіювання властивостей (наприклад, міксин).

Чи має LESS також цю функцію?

Так, Less.js представлений extendу версії 1.4 .

:extend()

Замість того, щоб реалізувати @extendсинтаксис at-rule ( ), використовуваний 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;
}

Простий спосіб розширити функцію в менших рамках

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

Вихідні дані

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

Перегляньте https://codepen.io/sprushika/pen/MVZoGB/