Leer, bewacht mixin wird eliminiert andere Mixins unter derselben Regel in weniger

Ich habe versucht, den folgenden bewacht Mixins zu bekommen richtig in unserem WENIGER Sheets zu arbeiten:Leer, bewacht mixin wird eliminiert andere Mixins unter derselben Regel in weniger

#font { 
    .body(@size: 15px, @lineHeight: 18px, @weight: normal) { 
     font: @weight @size~"/"@lineHeight Arial, sans-serif; 
    } 
    .marginLeft(@margin) when (@margin = 0) { } 
    .marginLeft(@margin) when not (@margin = 0) { 
     margin-left: @margin; 
    } 
    .marginTop(@margin) when (@margin = 0) { } 
    .marginTop(@margin) when not (@margin = 0) { 
     margin-top: @margin; 
    } 
    .DinBold(@size: 14px, @lineHeight: 20px, @offsetTop: 0, @offsetLeft: 0) { 
     #font > .marginLeft(@offsetLeft); 
     #font > .marginTop(@offsetTop); 
     font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif; 
    } 
}

Die Idee dabei ist, dass wenn Jeder der Schriftoffsets ist Null. Ich möchte nicht, dass der Randstil gesetzt wird. Nun, es funktioniert gut, wenn die beiden Parameter nicht Null sind, wie:

#font > .DinBold(42px, 42px, -7px, -3px);

Aber in dem Moment @offsetLeft 0, entweder explizit oder implizit:

#font > .DinBold(42px, 42px, -7px);

oder

#font > .DinBold(42px, 42px, -7px, 0);

scheint es, dass selbst der Rand oben nicht belichtet wird. Das Gleiche passiert, wenn du es umdrehst, die marginTop-Mischung vor die marginLeft-Mischung stellst und stattdessen 0 für @offsetTop eingibst, was mir zu verstehen gibt, dass beim ersten Mixing alle weiteren Mixin-Aufrufe möglich sind ignoriert - irgendwelche Erkenntnisse dazu?

Quelle

2012-04-10 Johnny

Das ist sicherlich ein ungewöhnliches Verhalten. Soweit ich feststellen kann, dass Ihr Bundle und Mixins korrekt sind, könnte es ein Problem mit LESS selbst sein. Vielleicht möchte ich ein Ticket auf dem Git Repo des Projekts öffnen. Eine Sache, die ich versuchte, war, einen Bruch für den Wert zu verwenden, den ich Null sein wollte, also 0.1px statt nur 0. und die Randattribute zeigten. Ich glaube nicht, dass CSS Brüche behandelt, also würde es wahrscheinlich als 0 interpretiert werden. –

Sieht aus, als ob sie endlich eine Lösung für dieses Problem gefunden haben, die mit der nächsten Version ausgehen sollte: https://github.com/cloudhead/less .js/issues/773 # issementcomment-7522445 – Johnny

Ich verwarf die vorherigen Antworten, da sie nicht für Sie arbeiteten. Ich bin ziemlich überrascht, dass sie nicht funktionieren, da die LESS information darauf hinweist, dass es in der Lage sein sollte, einen Fall ungleich Null zu behandeln.

Ich habe jedoch eine neue Idee, basierend auf pattern matching. Versuche Folgendes. Es ist so konzipiert, dass Sie nur zwei Parameter übergeben können, wenn kein Rand gesetzt werden soll, oder vier Parameter, aber der dritte Parameter könnte "oben" oder "links" sein, damit der vierte Parameter nur das eine oder das andere setzt, oder Sie können zwei Zahlen übergeben und sowohl oben als auch links (in dieser Reihenfolge) festlegen. Dies vermeidet die .marginLeft/Top Aufruf, wenn nicht benötigt wird, und nimmt eine 0 wenn Sie eine in zu übergeben.

#font { 
    .body(@size: 15px, @lineHeight: 18px, @weight: normal) { 
     font: @weight @size~"/"@lineHeight Arial, sans-serif; 
    } 
    .marginLeft(@margin) when isnumber(@margin) { 
     margin-left: @margin; 
    } 
    .marginTop(@margin) when isnumber(@margin) { 
     margin-top: @margin; 
    } 

    .DinBold(@size: 14px, @lineHeight: 20px) { 
     font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif; 
    } 

    .DinBold(@size: 14px, @lineHeight: 20px, top, @offsetTop: 0) { 
     #font > .marginTop(@offsetTop); 
     font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif; 
    } 

    .DinBold(@size: 14px, @lineHeight: 20px, left, @offsetLeft: 0) { 
     #font > .marginLeft(@offsetLeft); 
     font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif; 
    } 

    .DinBold(@size: 14px, @lineHeight: 20px, @offsetTop: 0, @offsetLeft: 0) { 
     #font > .marginLeft(@offsetLeft); 
     #font > .marginTop(@offsetTop); 
     font: @size~"/"@lineHeight 'DINBold', Arial, sans-serif; 
    } 
}

Quelle

2012-05-03 23:00:08 ScottS

Hey Scott, wenn ich mich richtig erinnere, warf LESS Kompilierungsfehler auf mich, als ich den Nullfall entfernte und sagte, dass keine Methode definiert wurde. Wie für die zweite Lösung, Marge: Auto ist nicht das gleiche wie keine Marge, wenn ich mich nicht irre, was dazu führt, dass der Browser seltsame Margin Offsets verursacht, wenn auf automatisch eingestellt ... – Johnny

@ Johnny - Interessant über die Kompilierungsfehler In Bezug auf den anderen ging ich von Ihrer Aussage "Ich möchte nicht, dass der Margin-Stil gesetzt wird" aus, wenn es der Null-Fall ist, den Sie mit "Auto" meinten.Aber Sie haben Recht, ich denke, in den meisten Fällen ist der Rand standardmäßig "0". Gibt es einen Grund, es nicht auf "0" zu setzen? Außerdem möchte ich eine dritte mögliche Lösung hinzufügen, an die ich gedacht habe. – ScottS

@ Johnny - es scheint seltsam, dass der erste Fall einen Kompilierungsfehler werfen würde. Sie sollten in der Lage sein, einen solchen Wächterzustand ohne etwas anderes zu schaffen. Ich fügte die dritte Idee hinzu, die zwei 'when' Anweisungen verwendet, aber immer noch ohne eine Null-Bedingung (aber vielleicht ist es das' wenn nicht', das den Kompilierungsfehler verursacht). – ScottS

Ich habe Nacharbeiten gerade mit dem gleichen Problem zu kämpfen, manche weniger, dass mit lessphp fein zusammengestellt, aber nicht mit lessjs. Scheint, dass leere Mixins alle folgenden Mixins im selben Regelsatz oder mit dem Mixing vom Rendering abhalten. Aber lege irgendeinen Inhalt in den leeren Mix und alles funktioniert gut.

Also war die einfache Lösung, einen WENIGER Kommentar (//) in die leere Mischung zu geben, zu meiner Überraschung funktionierte das gut. Nur zwei einfache Schrägstriche in ihrer eigenen Zeile mit nichts anderem, LESS-Kommentare werden nicht in der Ausgabe-CSS gerendert, so dass Sie Ihre leeren Mixin haben.

Quelle

2012-05-17 18:46:13 Adrien

Leer, bewacht mixin wird eliminiert andere Mixins unter derselben Regel in weniger

Antwort

Verwandte Themen