2012-09-27 3 views
7

Lassen Sie uns sagen, dass ich einen Stil haben definiert mit weniger:Wiederverwenden von LESS verschachtelte Formate

ul.unstyled, 
ol.unstyled { 
    margin-left: 0; 
    list-style: none; 
} 

Später möchte ich die unstyled Klasse wiederverwenden:

.my-list { 
    .unstyled; 
} 

Dies funktioniert nicht aber, und ich kann die Magie nicht herausfinden, damit es funktioniert. Irgendwelche Gedanken?

Antwort

5

Sie können keine beliebigen Klassendefinitionen verwenden, nur Mixins (die mit einem Punkt beginnen). In diesem Fall müssen Sie es duplizieren.

+2

bedeutet dies, dass LESS ein parameterloses Mixin erzeugt, wenn Sie '.myClass' definieren? –

+0

Gute Frage. Ich denke ja, denn nach der Dokumentation sind Mixins nur Klassen: "Mit Mixins können Sie alle Eigenschaften einer Klasse in eine andere Klasse einbetten, indem Sie einfach den Klassennamen als eine seiner Eigenschaften aufnehmen. Es ist wie Variablen, aber für ganze Klassen ". –

3

Versuchen Sie folgendes:

.unstyled { 
    margin-left: 0; 
    list-style: none; 
} 

.my-list { 
    .unstyled; 
} 

Sie werden nicht zu nisten .unstyled der Lage sein, wenn sie als ul.unstled und ol.unstyled definiert ist.

+0

That funktioniert nicht für mich, weil ich nicht die ursprüngliche Definition besitze ... mit anderen Worten, die 'unstyled' Klasse ist in' Bootstrap.less' definiert und ich möchte vermeiden, die Abhängigkeit zu optimieren. Stattdessen möchte ich wissen, wie man einen verschachtelten Stil wiederverwenden kann. –

+0

Ah. Wenn Sie diese Stile nicht überschreiben können, bin ich mir nicht sicher, ob Sie sie wiederverwenden können. LESS lässt Sie "ul.unstyled" oder ähnliches nicht als verschachtelte Klasse angeben. Du könntest immer ein Mixin erstellen, aber das würde den Code duplizieren. –

1

Da Sie nicht .unstyled wiederverwenden können, wenn es dich um ein verschachteltes Format ist und Sie wollen wahrscheinlich nicht den Bootstrap-Quellcode bearbeiten, würde ich vorschlagen, dass Sie nur die beiden Klassennamen auf der Liste zuweisen:

<ul class="unstyled my-list" />