Hinzufügen eines absoluten Selektors in einem verschachtelten Stil

Question

Ich versuche herauszufinden, wie man die verschachtelten Stile in Less am besten wiederverwenden kann, um Doppelungen zu vermeiden, aber ich bin mir nicht sicher, ob ich den besten Weg gefunden habe.

Im Moment habe ich so etwas wie:

.category-link, 
.caption-link { 
    background-color: @linkColour; 
    font-family: @linkFont; 
    max-width:2em; 
    a { 
     /* INNER LINK STYLES */ 
     text-decoration:none; 
     white-space:nowrap; 
     /* ...INNER LINK STYLES CONTINUE... */ 
    } 
} 

Jetzt möchte ich .action-link a die gleichen inneren Verbindungs ​​Stile an den Wähler anzuwenden, ohne die äußeren Stile .action-link Anwendung.

ich meine beabsichtigte Ausgabe, wenn ich es auf diese Weise tun:

.inner-link-styles() { 
    /* INNER LINK STYLES */ 
    text-decoration:none; 
    white-space:nowrap; 
    /* ...INNER LINK STYLES CONTINUE... */ 
} 
.category-link, 
.caption-link { 
    background-color: @linkColour; 
    font-family: @linkFont; 
    max-width:2em; 
    a { 
     .inner-link-styles; 
    } 
} 
.action-link a { 
    .inner-link-styles; 
} 

die keine Vervielfältigung erfordert, aber ich würde es vorziehen, diese Stile in ihren aktuellen Standort zu halten, wo sie relevant sind, als sie nach mixins.less zu verschieben und die Komplexität für den nächsten Entwickler zur Fehlerbehebung zu erhöhen.

Was intuitiv gefühlt, aber es ist eindeutig falsch, war so etwas wie diese:

.category-link, 
.caption-link { 
    background-color: @linkColour; 
    font-family: @linkFont; 
    max-width:2em; 
    & a, 
    .action-link a { 
     /* INNER LINK STYLES */ 
     text-decoration:none; 
     white-space:nowrap; 
     /* ...INNER LINK STYLES CONTINUE... */ 
    } 
} 

aber gibt es eine andere Vorsilbe ich an einen Wähler anwenden kann, um es absolut Basis zu haben, anstatt relativ zu dieser Verschachtelungsebene ist ?

Answer 1

Absolute Selektoren können nicht innerhalb eines verschachtelten Blocks hinzugefügt werden, da der innere Selektor, wenn wir ihn unter einen anderen Block verschachteln, als untergeordnetes Element betrachtet wird (wie im DOM), es sei denn, wir fügen &. dem Selektor hinzu (In diesem Fall könnte der innere eine andere Klasse auf dem Elternteil selbst sein).

Mit Mixins oder dem :extend Merkmale sind die besten Optionen für Ihren Fall, weil Sie eine Reihe von gemeinsamen Eigenschaften, um mehrere Elemente zuweisen.

---

Da Eltern Selektor bekannt ist (es ist entweder .category-link a oder .caption-link a), können Sie die Eigenschaften dieser Wähler in .action-link a auch erweitern. Dies würde nur die Eigenschaften der inneren Verbindung und nicht die ihrer Eltern erweitern.

Ich glaube nicht, dass dies die Komplexität für den nächsten Entwickler zur Fehlersuche erhöht, weil die Änderung der Eigenschaften in der ursprünglichen .category-link a die Eigenschaften für .action-link a auch ändern wird.

.category-link, 
.caption-link { 
    background-color: blue; 
    font-family: Arial; 
    max-width:2em; 
    a { 
     /* INNER LINK STYLES */ 
     text-decoration:none; 
     white-space:nowrap; 
     /* ...INNER LINK STYLES CONTINUE... */ 
    } 
} 
.action-link { 
    a { 
    &:extend(.category-link a); 
    } 
}