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é?

css sass less extend jonschlinkert
la source

Pour clarifier, les autres références de question ne demandent PAS la même chose. Cette question est simple: "LESS a-t-il une fonction d'extension?". L'autre question est de poser quelque chose qui nécessite beaucoup plus de réflexion concernant les décisions de style.

jonschlinkert

... pour ajouter à mon dernier commentaire, l'autre question inclut la balise "coding-style" qui soutient davantage mon propos.

jonschlinkert

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) {...}

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

jonschlinkert
la source

"La syntaxe de LESS est plus" fidèle "au CSS traditionnel que la @extendsyntaxe at-rule ( ) implémentée par SASS et Stylus, qui est généralement réservée pour donner des instructions ou des directives à l'analyseur CSS dans le navigateur." <- qu'est-ce que ça veut dire? Les odeurs du marketing parlent.

cimmanon

nous continuons cette discussion en discussion

steveax

@cimmanon Je suppose que vous avez raison, je ne voulais pas que ça sonne comme ça. Mais il y a beaucoup de controverse à propos de la syntaxe de Less, apparemment parce que les gens s'attendaient à ce que Less utilise la même syntaxe que SASS. Mais en CSS, les pseuso-sélecteurs sont utilisés pour les règles de correspondance de modèles afin de déterminer quelles règles de style s'appliquent aux éléments de l'arborescence du document, tandis que les règles at sont utilisées pour les directives de "niveau supérieur" (comme je l'ai mentionné). Alors peut-être que je devrais modifier la réponse pour fournir ce détail? Ou est-ce une autre question: "Pourquoi LESS a-t-il choisi la syntaxe du pseudo-sélecteur?"

jonschlinkert

vous devriez vraiment mettre à jour le moins de documentation en ligne, je ne vois rien à propos de: extend () et il aurait été bon de savoir plus tôt

Joshua Bambrick

La documentation, comme pour le code, est maintenue par la communauté. Ce genre de suggestions serait génial d'avoir sur le dépôt réel, et les demandes d'extraction sont toujours les bienvenues ;-)

jonschlinkert

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

Réponses:

Moyen facile d'étendre une fonction dans Less Framework