Verwendung derselben Klasse in zwei sehr unterschiedlichen Kontexten in LESS?

Question

Nehmen wir an, ich habe eine Klasse mit dem Namen city-toggler.

Im Moment habe ich die Klasse hier:

#city { 
    .city-header { 
     .box { 
      .city-toggler { 
       //styles here 
      } 
     } 
    } 
} 

Jetzt muss ich an einem völlig anderen Ort in der Website ein city-toggler Element hinzufügen, zum Beispiel:

.footer-holder -> .footer -> .footer-section -> .city-toggler 

Wie kann ich tun dies in weniger, ohne alle Stile von oben zu kopieren?

Ich nehme an, ich könnte city-toggler aus der Struktur LESS nehmen und es separat verwenden, aber gibt es eine bessere Lösung?

Answer 1

Es gibt nichts Schlechtes bei der Definition der city-toggler kontextunabhängig, wenn es nicht abhängig von einem bestimmten Kontext ist. Sie müssen keinen Code kopieren.

Entweder dies tun:

.city-toggler { 
    /* all styles of a default city-toggler */ 
} 

#city { 
    /* ... */ 
    .city-toggler { 
    /* overrides that apply only to city-togglers in this context */ 
    } 
} 

#footer { 
    /* same as for #city */ 
} 

oder, um den Code zu kopieren (auch nicht in der CSS erstellt, über Mixins zB), aber die Stadt-toggler zu verhindern, dass in jedem Kontext verwendet werden, dies zu tun :

#city, #footer { 
    .city-toggler { 
    /* all styles of a default city-toggler */ 
    } 
} 

#city { 
    /* ... */ 
    .city-toggler { 
    /* overrides that apply only to city-togglers in this context */ 
    } 
} 

Answer 2

Mixins sollte für Sie arbeiten:

.my-mixin{ 
     background-color:#FFF; 
    } 
    #city { 
    .city-header { 
     .box { 
      .city-toggler { 
       .my-mixin; 
      } 
     } 
    } 
    .otherplace { 
     .city-toggle { 
     .my-mixin; 
     } 
    } 
}