Come estendere una class / mixin che ha un selettore formato dynamicmente

Come estendere una class Less che è formata dynamicmente usando & combinator?

Meno che genera l’output atteso:

.hello-world { color: red; } .foo { &:extend(.hello-world); font-size: 20px; } 

Uscita CSS prevista:

 .hello-world, .foo { color: red; } .foo { font-size: 20px; } 

Meno non genera output attesi:

 .hello { &-world { color: red; } } .foo { &:extend(.hello-world); font-size: 20px; } 

Output CSS inatteso:

     .hello-world { color: red; } .foo { font-size: 20px; } 

    Estendere un selettore formato dynamicmente (usando liberamente il termine) come quello non è attualmente ansible in Less. C’è una richiesta di funzionalità aperta per supportare questo. Finché non sarà implementato, ecco due soluzioni per risolvere il problema.

    Opzione 1:

    Scrivi il contenuto dei .hello e .hello-world in un file Less separato (ad esempio test.less ), compila per ottenere il CSS. Creare un altro file per le regole di .foo , importare il CSS compilato come un file Less (usando la direttiva (less) ) e quindi estendere il .hello-world come originariamente previsto.

    test.less:

     .hello { &-world { color: red; } } 

    extended-rule.less:

     @import (less) "test.css"; .foo { &:extend(.hello-world); font-size: 20px; } 

    CSS compilato:

     .hello-world, .foo { color: red; } .foo { font-size: 20px; } 

    Questo metodo funzionerebbe perché quando viene importato il file test.css , il selettore è già formato e non è più dinamico. Lo svantaggio è che ha bisogno di un file aggiuntivo e crea dipendenza.


    Opzione 2:

    Scrivi un selettore fittizio con le regole per tutte le proprietà che devono essere applicate a .hello-world e .foo ed estenderlo come:

     .dummy{ color: red; } .hello { &-world:extend(.dummy) {}; } .foo:extend(.dummy){ font-size: 20px; } 

    Questo crea un selettore in più (fittizio) ma non è una grande differenza.

    Nota: aggiungere il mio commento come risposta in modo da non lasciare la domanda senza risposta e anche perché il work-around specificato nel thread collegato nei commenti non funziona per me così com’è.