Less.js: Erstellen von benutzerdefinierten Funktionen

Vielleicht, um es von einem Mix-In zu unterscheiden und näher an der CSS-Syntax zu bleiben, könnte es sein:

@darkfadein(<strong i="6">@color</strong>, @value): fadein(darken(<strong i="7">@color</strong>, @value));

Eine Art Variable, die von Parametern abhängt (was, wenn Sie daran denken, eine Art Funktion ist =)

+1 zur Syntax von @souldreamer .

Aber mit @souldreamer ‚s Syntax es woul nicht posible sein , einige zu schreiben
Werte in Variablen umwandeln und wieder verwenden.

kann diese Syntax verwenden:

  @darkfadein(<strong i="9">@color</strong>, @value) {
     <strong i="10">@foo</strong>: darken(<strong i="11">@color</strong>, @value);
     return: fadein(@foo);
  }

Vielleicht wäre es in späteren Versionen möglich, so etwas zu tun:

  @darkfadein(<strong i="15">@color</strong>, @value) {
     <strong i="16">@foo</strong>: darken(<strong i="17">@color</strong>, @value);
     for(<strong i="18">@i</strong> = 0; <strong i="19">@i</strong> < 5; @i++): {
       <strong i="20">@foo</strong>: darken(<strong i="21">@foo</strong>, @i);
     };
     return: fadein(@foo);
  }

Ich habe eine ähnliche Notwendigkeit, eine Funktion irgendeiner Art zu verwenden, um einen Wert zurückzugeben. Ich denke, es gibt zwei mögliche Lösungen. Eine Lösung wäre, die Variablensyntax wie oben beschrieben

@grid-width(<strong i="7">@columns</strong>, @column-width) {
    <strong i="8">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: @grid-width(6,60);
}

Ein zweiter Ansatz wäre die Verwendung von Mixins. Da der Compiler Mixins ohnehin als JavaScript-Funktionen behandelt, wäre es wahrscheinlich eine einfache Abhilfe, _mixins ein return Feature hinzuzufügen_. So würde es aussehen:

.grid-width(<strong i="13">@columns</strong>, @column-width) {
    <strong i="14">@computedWidth</strong> = @columns*@column-width;
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

Die "funktionalen Direktiven" von SASS liefern ein ähnliches Ergebnis, obwohl ich glaube, dass diese Mixin-Lösung viel eleganter wäre.

Auch die Ausgaben 508 und 609 beziehen sich darauf.

Ich denke, die zweite Syntax von @tylertate wäre die beste. Ich scheint am einfachsten zu sein, da, wie Sie bereits sagten, weniger Mixins als JavaScript analysiert.

Wäre so etwas mit Mixins möglich?

.grid-width(<strong i="8">@columns</strong>, @column-width) {
    <strong i="9">@computedWidth</strong> = @columns*@column-width;
    for (var i = 0; i <= 36; i++) {
      <strong i="10">@computedWidth</strong> = darken(<strong i="11">@computedWidth</strong>, i);
    }
    return @computedWidth;
}
div {
    width: .grid-width(6,60);
}

Ich würde lieber so etwas wie eine definierte LESS-Plugin-Syntax sehen und programmierähnliche Logik in ein JavaScript-LESS-Plugin verschieben. Diese Vorschläge stimmen nicht mit der aktuellen Syntax und dem Design von LESS überein.

Zustimmen.. es gibt einen Fehler in dieser markierten Dokumentation, da es relativ einfach ist, Funktionen hinzuzufügen, wenn Sie wissen, wie.

Was war also die Auflösung?

Wir müssen es dokumentieren. siehe https://github.com/cloudhead/lesscss.org/issues/54

und die verlinkte Ausgabe von less.js zeigt, wie Sie im Browser eine Funktion zu less hinzufügen können

less = { functions: { rgbstr: function (color) {var str = color; return new(less.tree.Quoted)('"' + str + '"', str,true,1);}}};

im Moment gibt es keine Möglichkeit, Funktionen in die Node-Version einzufügen, aber es sollte geben

Danke, ich schätze die Antwort und die Position, JavaScript aus der Syntax von LESS herauszuholen.

Es scheint jedoch ein so klarer Anwendungsfall zu sein, nicht gezwungen zu sein, den Rückgabewert eines Mixins mit einer bestimmten Eigenschaft zu verknüpfen. Jeder, der ein Raster verwendet, wird das tun wollen, was @Deltachaos versucht hat. Es wäre großartig, dies erreichen zu können, ohne auf die Ebene der Erstellung eines Plugins abzusteigen.

Es ist eine knifflige Sache - wenn Sie Loops benötigen oder es in einem Plugin leben muss.

Wenn es jedoch 3 weniger Funktionen mit bestimmten Werten aufruft, stimme ich zu, dass es sinnvoll ist, diese in weniger zu extrahieren, um die Syntax DRY zu machen - es macht keinen Sinn, ein Plugin schreiben zu müssen, um die Tatsache zu extrahieren, dass Sie möchten an einer Stelle um 5% verdunkeln.

Ich habe wieder geöffnet, aber dies könnte woanders dupliziert werden, wir werden sehen.

Im Moment werden Variablen aus einem Mixins-Bereich alle in den äußeren Bereich kopiert - das ist eine Art Rückgabe von Variablen.. aber es verursacht schreckliche Probleme und ich möchte es entfernen.

Duplikat von #538

"Variablen aus einem Mixins-Bereich werden alle in den äußeren Bereich kopiert"

Äh, wirklich? Ja, entfernen wir dieses Verhalten. Ich möchte lieber, dass Variablen für den Export markiert sind oder etwas anderes als nur automatisches Lecken. Das ist für mich kein erwartetes Verhalten. Variablen sollten einen Blockbereich haben.

Ja, es ist wie die Unterstützung von Funktionen über einen Backdoor-Bug

Ich finde einen Hack: Wenn Sie eine globale js-Funktion deklarieren, können Sie sie später verwenden!

<strong i="6">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="7">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain hat gerade den gleichen Hack gefunden :)

@fabienevain Es funktioniert gut, danke~ :+1:

Ich habe festgestellt, dass Sie tatsächliche Funktionen aus demselben eval-Jail erstellen können, indem Sie auf process.mainModule zugreifen ... Der einzige Haken ist, dass Sie möglicherweise über process.mainModule.children iterieren und less.js abgleichen müssen, wenn sich diese Reihenfolge aus irgendeinem Grund ändert Zukunft. Ich habe vor, nicht zu iterieren, nur blind darauf zu vertrauen, dass weniger das dritte Modul ist.

Leider können Sie nicht auf require zugreifen, aber Sie können auf fs und andere zugreifen, die bereits von weniger benötigt werden, was viel ist:

<strong i="10">@anything</strong>: `(function() {
    // console.log(process.mainModule.children[0].exports); // node fs is here
    // console.log(process.mainModule.children[2].children) // children of less, more node modules!
    var less = process.mainModule.children[2].exports;

    less.functions.functionRegistry.add("firstfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("00ff00");
    });

    less.functions.functionRegistry.add("secondfunc", function(a, context) {
        // console.log(a, context);
        return new less.tree.Color("ff0000");
    });
})()`;


test {
    background: firstfunc(white);
    color: secondfunc(black);
}

Das Schöne daran, eine echte Funktion zu haben, ist diese Variable context , die saftige Details wie die zu verarbeitende Datei enthält, sodass Sie z.

Bearbeiten Ich frage mich, warum Backticks überhaupt eingeführt werden, wenn versucht wird, JS fernzuhalten. Ich mag mein LESS so gut wie möglich kopieren und einfügen, daher sind Plugins nicht gut für mich.

Ich mag mein LESS so gut wie möglich kopieren und einfügen, daher sind Plugins nicht gut für mich.

Sie gehen also davon aus, dass Ihr Code "kopierbar und einfügbar" ist, auch wenn Sie den node.js-basierten less.js-Compiler in Ihren Inline-Backtick-Hacks benötigen, aber gleichzeitig das Gefühl haben, dass es schief geht, wenn Sie Plugins verwenden würden? Doh!

@seven-phases-max meine Tools sind ziemlich durcheinander. Wenn ich die Lessc-Befehlszeilenargumente steuern könnte, würde ich wahrscheinlich Plugins verwenden. (Oder habe ein Master-Plugin, in das ich alles stopfe) Aber nein, ich habe meine Umgebung vermasselt und ich habe ~ 100 WP-Themes im Eclipse-Arbeitsbereich, die ich einfach nicht loswerden kann, weil alle Build-Befehle usw. darin stecken .

@Ciantic Zunächst einmal benötigen Sie keine bestimmten Befehlszeilenoptionen, um ein benutzerdefiniertes Funktions-Plugin zu verwenden - falls erforderlich (#2479). Zweitens bezweifle ich, welche tief geschraubte Umgebung es Ihnen verbietet, Compileroptionen zu steuern (schließlich ist lessc "ausführbare Datei" nur ein OS-Konsolenskript, das auf das eigentliche Knotenskript umleitet - so kann man auf die eine oder andere Weise einfach _alles_ dort einfügen).

In jedem Fall ging es in meinem Kommentar nur um die Adv "Kopieren und Einfügen vs. Plugins". während sich herausstellt, dass es sich nur um eine Problemumgehung für eine defekte Build-Tools/Kette handelt.

Das @seven-phases-max-Import-Plugin sieht genau das Tool aus, das ich brauche! Obwohl ich die Funktionen in meinem Projekt und nicht in der globalen Registrierung definieren möchte, kann ich auf diese Weise die Funktionen innerhalb des Projekts bearbeiten und muss mir keine Sorgen machen, dass Milliarden weniger Dateien beschädigt werden, wenn ich eine Änderung an der globalen Funktion vornehme.

@Ciantic

Obwohl ich die Funktionen in meinem Projekt und nicht in der globalen Registrierung definieren möchte, kann ich auf diese Weise die Funktionen innerhalb des Projekts bearbeiten und muss mir keine Sorgen machen, dass Milliarden weniger Dateien beschädigt werden, wenn ich eine Änderung an der globalen Funktion vornehme.

Lesen Sie weiter in. Der ursprüngliche Entwurf meines Pull-Requests ging den einfachen Weg der globalen Registrierung, aber mit einigen gewonnenen Erkenntnissen verfeinerte ich ihn später, um eine bereichsspezifische Registrierung durchzuführen. Z.B

.my-mixin() {
  <strong i="10">@plugin</strong> "my-func.js";
  <strong i="11">@value</strong> : my-func();
}

wird my-func außerhalb des Mixin-Bereichs verlieren. Pfade sind natürlich auch relativ zu der Datei, die die @plugin Deklaration enthält, so dass alles ordentlich gebündelt und für den Verbrauch durch Dritte auslieferbar ist; 100% _transparent_.

Das war mein Designziel für dieses Feature. ^_^

less.js wird benötigt, um eine benutzerdefinierte Farbkombination hinzuzufügen
Problem tritt beim Commit des Codes auf
es unterstützt aber weniger.js

Ich finde einen Hack: Wenn Sie eine globale js-Funktion deklarieren, können Sie sie später verwenden!

<strong i="7">@fn</strong>: ~`fn = function(a) { return a; }`;

<strong i="8">@arg</strong>: 8px;

p {
    font-size: ~`fn("@{arg}")`;
}

@fabienevain Wie kann ich weniger Funktionen in @fn ? Zum Beispiel hsvsaturation 、 unit und so weiter .Thx.

@hiyangguo

Sie sollten keine Inline-JS-Ausdrücke verwenden, Punkt.
Erstellen und registrieren Sie benutzerdefinierte Funktionen auf geeignete Weise.
Lesen Sie die Dokumentation. Es ist alles da: http://lesscss.org/features/#plugin -atrules-feature

@rjgotten OK, vielen Dank.