LESS ha una funzione di "estensione"?

SASS ha una funzione chiamata @extendche consente a un selettore di ereditare le proprietà di un altro selettore, ma senza copiare le proprietà (come i mixin).

LESS ha anche questa funzione?

— jonschlinkert
fonte

Per chiarimenti, gli altri riferimenti alla domanda NON chiedono la stessa cosa. Questa domanda è semplice: "LESS ha una funzione di estensione?". L'altra domanda è chiedere qualcosa che richiede molta più riflessione sulle decisioni di stile.

— jonschlinkert

... per aggiungere al mio ultimo commento, l'altra domanda include il tag "coding-style" che supporta ulteriormente il mio punto.

— jonschlinkert

156

Sì, Less.js introdotto extendnella v1.4.0 .

:extend()

Piuttosto che implementare la @extendsintassi at-rule ( ) usata da SASS e Stylus, LESS ha implementato la sintassi della pseudo-classe, che dà all'implementazione di LESS la flessibilità di essere applicata direttamente a un selettore stesso o all'interno di un'istruzione. Quindi entrambi funzioneranno:

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

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

Inoltre, puoi utilizzare la alldirettiva per estendere anche le classi "annidate":

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

E puoi aggiungere un elenco separato da virgole di classi che desideri estendere:

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

Quando estendi i selettori annidati dovresti notare le differenze:

selettori annidati .selector1e selector2:

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

Ora .selector3:extend(.selector1 .selector2){};produce:

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

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

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

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

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

e infine .selector3:extend(.selector2 all){};:

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

— jonschlinkert
fonte

"La sintassi di LESS è più" fedele "al CSS tradizionale rispetto alla @extendsintassi at-rule ( ) implementata da SASS e Stylus, che è tipicamente riservata per dare istruzioni o direttive al parser CSS nel browser." <- cosa diavolo dovrebbe significare? Puzza di marketing parlare.

— cimmanon

dobbiamo continuare questa discussione in videochat

— steveax

@cimmanon Immagino tu abbia ragione, non volevo che suonasse in quel modo. Ma c'è molta controversia sulla sintassi di Less, apparentemente perché le persone si aspettavano che Less usasse la stessa sintassi di SASS. Ma nei CSS, gli pseuso-selettori sono usati per le regole di corrispondenza dei modelli per determinare quali regole di stile si applicano agli elementi nell'albero del documento, mentre le regole at sono usate per le direttive di "livello superiore" (come ho detto). Quindi forse dovrei modificare la risposta per fornire quel dettaglio? O è un'altra domanda: "Perché LESS ha scelto la sintassi dello pseudo-selettore?"

— jonschlinkert

dovresti davvero aggiornare la minore documentazione online, non riesco a vedere nulla su: extent () e sarebbe stato bello saperlo prima

— Joshua Bambrick

La documentazione, come il codice, è mantenuta dalla comunità. Questo tipo di suggerimenti sarebbe fantastico avere sul repository effettivo e le richieste pull sono sempre benvenute ;-)

— jonschlinkert

Un modo semplice per estendere una funzione nel framework Less

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

Produzione

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

Fare riferimento a https://codepen.io/sprushika/pen/MVZoGB/

— Spushika Mulakala
fonte