web-dev-qa-db-fra.com

Est-ce que LESS a une fonctionnalité "extend"?

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

Est-ce que MOINS possède également cette fonctionnalité?

csscss3sasslessextend
87
jonschlinkert

Oui, Less.js a introduit extend dans v1.4. .

:extend()

Plutôt que d’implémenter la syntaxe at-rule (@extend) Utilisée par SASS et Stylus, LESS a implémenté la syntaxe de pseudo-classe, ce qui donne à l’implémentation de LESS la possibilité d’appliquer soit directement à un sélecteur lui-même, soit dans une instruction . Donc, les deux fonctionneront:

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

ou

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

De plus, vous pouvez utiliser la directive all 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;
}

Lors de l'extension de sélecteurs imbriqués, vous devriez remarquer les différences:

sélecteurs imbriqués .selector1 et selector2:

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

Maintenant, .selector3:extend(.selector1 .selector2){}; génère:

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

, .selector3:extend(.selector1 all){}; génère:

.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;
}
149
jonschlinkert

Un moyen facile d'étendre une fonction dans un cadre Less

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

Sortie

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

Voir https://codepen.io/sprushika/pen/MVZoGB/

3
Spushika Mulakala