Less.js: Création de fonctions personnalisées

Peut-être pour le différencier d'un mix-in et rester plus proche de la syntaxe CSS, cela pourrait être :

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

Un peu comme une variable qui dépend de paramètres (qui, si vous y réfléchissez, est une sorte de fonction =)

+1 à la syntaxe de

Mais avec la syntaxe de @souldreamer il ne serait pas possible d'en écrire
valeurs en variables et les réutiliser.

peut en utilisant cette syntaxe :

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

peut-il être possible dans les versions ultérieures de faire quelque chose comme ceci :

  @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);
  }

J'ai un besoin similaire d'utiliser une fonction quelconque pour renvoyer une valeur. Je pense qu'il y a deux solutions possibles. Une solution serait d'étendre la syntaxe de la variable comme @Deltachaos décrite ci-dessus, qui est essentiellement :

@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);
}

Une deuxième approche serait d'utiliser des mixins. Étant donné que le compilateur traite de toute façon les mixins comme des fonctions JavaScript, _ajouter une fonctionnalité return aux mixins_ serait probablement un remède simple. Voici à quoi cela ressemblerait :

.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);
}

Les "directives fonctionnelles" de SASS fournissent un résultat similaire, bien que je pense que cette solution de mixin serait beaucoup plus élégante.

Les numéros 508 et 609 sont également liés à cela.

Je pense que la deuxième syntaxe de @tylertate serait la meilleure. Je semble être le plus simple car, comme vous l'avez dit, moins analyse déjà les mixins en JavaScript.

Est-ce que certains penseraient que cela serait possible avec les mixins ?

.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);
}

Je préférerais voir quelque chose comme une syntaxe de plugin LESS définie et déplacer une logique de type programmation vers un plugin JavaScript LESS. Ces suggestions sont incompatibles avec la syntaxe et la conception LESS actuelles.

D'accord.. il y a un bug à propos de cette documentation marquée car il est relativement simple d'ajouter des fonctions quand on sait comment.

Alors quelle était la résolution ?

Nous devons le documenter. voir https://github.com/cloudhead/lesscss.org/issues/54

et le problème lié de less.js montre comment ajouter une fonction à less dans le navigateur

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

pour le moment, il n'y a aucun moyen de brancher des fonctions dans la version du nœud, mais il devrait y avoir

Merci, j'apprécie la réponse et la position pour sortir JavaScript de la syntaxe de LESS.

Cependant, ne pas être obligé d'associer la valeur de retour d'un mixin à une propriété spécifique semble être un cas d'utilisation si clair. Quiconque utilise une grille voudra faire ce que @Deltachaos essayait de faire. Ce serait formidable de pouvoir y parvenir sans tomber au niveau de la création d'un plugin.

C'est une chose délicate - si vous avez besoin d'avoir des boucles ou si cela doit vivre dans un plugin.

Cependant, s'il appelle 3 fonctions de moins avec des valeurs spécifiques, je conviens qu'il est logique de pouvoir extraire cela à l'intérieur de moins afin de rendre la syntaxe SÈCHE - cela n'a pas de sens d'avoir à écrire un plugin pour extraire le fait que vous voulez assombrir de 5% en un seul endroit.

J'ai ré-ouvert mais cela pourrait être dupliqué ailleurs, on verra.

pour le moment, les variables d'une portée mixins sont toutes copiées dans la portée externe - ce qui est une sorte de moyen de renvoyer des variables .. mais cela cause d'horribles problèmes et je veux le supprimer.

duplicata du #538

"les variables d'une portée mixins sont toutes copiées dans la portée externe"

Euh, vraiment ? Oui, supprimons ce comportement. Je préfère que les variables soient marquées pour l'exportation, ou autre chose qu'une simple fuite automatique. Ce n'est pas un comportement attendu pour moi. Les variables doivent avoir une portée de bloc.

oui, c'est comme prendre en charge les fonctions via un bug de porte dérobée

Je trouve une astuce : si vous déclarez une fonction js globale, vous pourrez l'utiliser plus tard !

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

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

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

@fabienevain a trouvé le même hack tout à l'heure :)

@fabienevain Ça marche bien, merci~ :+1:

J'ai trouvé que vous pouvez créer des fonctions réelles à partir de la même prison d'évaluation en accédant à process.mainModule... Le seul hic, c'est que vous devrez peut-être itérer sur process.mainModule.children et faire correspondre less.js si cet ordre pour une raison quelconque change dans futur. Je prévois de ne pas répéter aveuglément en faisant moins confiance au troisième module.

Malheureusement, vous ne pouvez pas accéder à require , mais vous pouvez accéder à fs et à d'autres qui sont déjà requis par moins, ce qui est largement suffisant :

<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);
}

La chose intéressante à propos d'avoir une fonction réelle est cette variable context , qui contient des détails juteux comme le fichier en cours de traitement afin que vous puissiez, par exemple, créer votre propre importation de données svg avec des paramètres, etc.

Edit Je me demande pourquoi les backticks sont même introduits si JS est tenté d'être tenu à l'écart. J'aime mon MOINS aussi copier-coller que possible, donc les plugins ne sont pas bons pour moi.

J'aime mon MOINS aussi copier-coller que possible, donc les plugins ne sont pas bons pour moi.

Donc, vous supposez que votre code _est_ "copier et coller" même si vous avez besoin d'un compilateur less.js basé sur node.js dans vos hacks backtick en ligne, mais en même temps, vous pensez que cela se passe mal si vous utilisez des plugins ? Oh !

@seven-phases-max mes outils sont assez foirés. Si je pouvais contrôler les arguments de la ligne de commande lessc, j'utiliserais probablement des plugins. (Ou avoir un plugin maître où je bourre tout) Mais non, j'ai foutu mon environnement, et j'ai ~ 100 thèmes WP dans l'espace de travail Eclipse dont je ne peux pas me débarrasser parce que toutes les commandes de construction, etc. sont bloquées là-dedans .

@Ciantic Tout d'abord, vous n'avez besoin d'aucune option de ligne de commande particulière pour utiliser un plugin de fonctions personnalisées - si nécessaire (# 2479). Secondaire, je doute que tout environnement profondément foutu vous interdise de contrôler les options du compilateur (après tout, lessc "exécutable" n'est qu'un script de console du système d'exploitation redirigé vers le script de nœud réel - on peut donc facilement y injecter _n'importe quoi_ d'une manière ou d'une autre).

Quoi qu'il en soit, mon commentaire concernait simplement l'adv "copier-coller contre plugins". alors qu'il s'avère qu'il ne s'agit que d'une solution de contournement pour une chaîne/outils de construction cassée.

Le plugin d'importation @seven-phases-max ressemble exactement à l'outil dont j'ai besoin ! Bien que je souhaite définir les fonctions à l'intérieur de mon projet, et non dans le registre global, de cette façon, je peux modifier les fonctions dans le projet et ne pas craindre de casser des milliards de fichiers en moins si je modifie la fonction globale.

@Ciantic

Bien que je souhaite définir les fonctions à l'intérieur de mon projet, et non dans le registre global, de cette façon, je peux modifier les fonctions dans le projet et ne pas craindre de casser des milliards de fichiers en moins si je modifie la fonction globale.

Lisez plus loin. Le brouillon initial de ma pull request a emprunté la voie facile de l'enregistrement global, mais avec quelques connaissances acquises, je l'ai ensuite affiné pour faire un enregistrement local de portée. Par exemple

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

ne fuira pas my-func dehors de la portée de mixin. Les chemins sont bien sûr également relatifs au fichier qui contient la déclaration @plugin , donc tout est soigneusement regroupé et livrable pour consommation par des tiers ; 100 % _de manière transparente_.

C'était mon objectif de conception pour cette fonctionnalité. ^_^

less.js est nécessaire pour ajouter une combinaison de couleurs personnalisée
problème survient lors de la validation du code
il prend en charge mais a besoin de moins.js

Je trouve une astuce : si vous déclarez une fonction js globale, vous pourrez l'utiliser plus tard !

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

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

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

@fabienevain Comment utiliser moins de fonctions dans @fn ? Tels que hsvsaturation 、 unit et ainsi de suite .Thx.

@hiyangguo

Vous ne devez pas utiliser d'expressions JS en ligne, point final.
Créez et enregistrez des fonctions personnalisées de la manière appropriée.
Lisez la documentation. Tout y est : http://lesscss.org/features/#plugin -atrules-feature

@rjget OK, merci beaucoup.