LESS - Interpolation - Mit dynamisch generierten Klassennamen AS MIXIN selbst?

Nehmen wir an, Sie möchten ein Mix-In, das einen Parameter akzeptiert und diesen Parameter verwendet, um ein anderes Mix-In aufzurufen.LESS - Interpolation - Mit dynamisch generierten Klassennamen AS MIXIN selbst?

Wenn Sie dies versuchen, führt dies zu einem nicht erkannten Eingang in der Zeile, in der Sie versuchen, den Parameter zu interpolieren.

Wie kann ich einen Parameter akzeptieren, und dann diesen Parameter verwenden Sie eine andere mixin zu nennen (wobei der Parameternamen ein Teil des Namens des mixin ist) ??

Quelle

2017-01-13 Joshua Soileau

Dies scheint unmöglich zu sein, aber das Gegenteil ist möglich: http://codepen.io/mtbottens/pen/rjLJaX #dinklage – bottens

Kommt drauf an. Wenn Ihr Beispiel abstrakt ist (nicht nur über "Text-links-rechts-was auch immer", das viel einfacher codiert werden kann), d. H. Es handelt sich wirklich um wiederverwendbare Mixins, dann kodieren Sie einfach keine Mixin-Parameter in Mix-Namen. Behalte Parameter als Parameter, und in diesem Sinne sollte die ganze Geschichte genau umgekehrt geschrieben werden [zum Beispiel] (https://gist.github.com/seven-phases-max/3d95a06e3acd89dbc8916d733f00cb3d). –

Apropos Kopfgeld, kein wirklicher Punkt darin. Die Antwort ist so einfach wie: "Sie können nicht". (Daher empfehlen die Kommentare, Ihren Ansatz zu überarbeiten, der sowieso irgendwie fehlerhaft ist, selbst wenn Less ein solches Feature hat). –

Sie können nicht. So nicht. Die entsprechende Zeile in dem LESS-Quellcode ist in parser.js, mixin.call - der Parser eines mixin Aufruf:

e = parserInput.$re(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)

Das heißt, ein gültiger mixin Aufruf nur als gültiges CSS .class- oder #id Kennung benannt werden kann. Alles andere ist nicht übertragbar und kommt nicht einmal zur variablen Interpolationsstufe.

Wenn wir die Anforderungen der Lösung entspannen, gibt es einen Weg. Nun wollen wir eine Funktion, die einen Teil eines Klassennamens übernimmt und ein Mixin mit diesem Klassennamen aufruft. Wenn damit leben nicht völlig dynamisch zu sein, können wir einfach implementieren diese Funktion mit einer Reihe von when Klauseln:

.text-align(@direction) when (@direction=left) { 
    .text-left; 
} 
.text-align(@direction) when (@direction=center) { 
    .text-center; 
} 
.text-align(@direction) when (@direction=right) { 
    .text-right; 
}

Quelle

2017-01-23 17:49:42

Danke, das war die Schlussfolgerung, zu der ich auch gekommen bin. –

LESS - Interpolation - Mit dynamisch generierten Klassennamen AS MIXIN selbst?

Antwort

Verwandte Themen