LESS a-t-il une fonction «d'extension»?

SASS a une fonction appelée @extendqui permet à un sélecteur d'hériter des propriétés d'un autre sélecteur, mais sans copier les propriétés (comme les mixins).

LESS a-t-il également cette fonctionnalité?

Oui, Less.js introduit extenddans la v1.4.0 .

:extend()

Plutôt que d'implémenter la @extendsyntaxe at-rule ( ) utilisée par SASS et Stylus, LESS a implémenté la syntaxe de pseudo-classe, qui donne à l'implémentation de LESS la flexibilité d'être appliquée soit directement à un sélecteur lui-même, soit à l'intérieur d'une instruction. Donc, les deux fonctionneront:

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

ou

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

De plus, vous pouvez également utiliser la alldirective pour étendre les classes «imbriquées»:

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

Et vous pouvez ajouter une liste de classes séparées par des virgules que vous souhaitez étendre:

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

Lorsque vous étendez les sélecteurs imbriqués, vous devez remarquer les différences:

sélecteurs imbriqués .selector1et selector2:

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

.selector3:extend(.selector1 .selector2){};Sort maintenant :

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

, .selector3:extend(.selector1 all){};sorties:

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

, .selector3:extend(.selector2){};sorties

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

et enfin .selector3:extend(.selector2 all){};:

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

Moyen facile d'étendre une fonction dans Less Framework

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

Production

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

Reportez-vous à https://codepen.io/sprushika/pen/MVZoGB/