Less.js: Creación de funciones personalizadas

Tal vez para diferenciarlo de una mezcla y mantenerse más cerca de la sintaxis CSS, podría ser:

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

Algo así como una variable que depende de los parámetros (que si piensas en es una especie de función =)

+1 a la sintaxis de @souldreamer .

Pero con @souldreamer 's sintaxis no woul ser Posible para escribir algunos
valores en variables y utilizarlos de nuevo.

puede usar esta sintaxis:

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

quizás sería posible en versiones posteriores hacer algo como esto:

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

Tengo una necesidad similar de usar una función de algún tipo para devolver un valor. Creo que hay dos posibles soluciones. Una solución sería extender la sintaxis de la variable como @Deltachaos se describió anteriormente, que es esencialmente:

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

Un segundo enfoque sería utilizar mixins. Dado que el compilador trata mixins como funciones de JavaScript de todos modos, _agregar una característica return a mixins_ probablemente sería un remedio simple. Así es como se vería:

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

Las "directivas funcionales" de SASS proporcionan un resultado similar, aunque creo que esta solución mixin sería mucho más elegante.

Los problemas 508 y 609 también están relacionados con esto.

Creo que la segunda sintaxis de @tylertate sería la mejor. Parece ser el más fácil porque, como dijiste menos, ya analiza mixins como JavaScript.

¿Algo como esto sería posible con 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);
}

Prefiero ver algo así como una sintaxis de complemento LESS definida y mover la lógica de programación a un complemento LESS de JavaScript. Estas sugerencias son incompatibles con la sintaxis y el diseño LESS actuales.

De acuerdo ... hay un error sobre esa documentación marcada ya que es relativamente simple agregar funciones cuando sabes cómo.

Entonces, ¿cuál fue la resolución?

Necesitamos documentarlo. ver https://github.com/cloudhead/lesscss.org/issues/54

y el problema vinculado de less.js muestra cómo puede agregar una función a less en el navegador

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

por el momento no hay forma de agregar funciones a la versión del nodo, pero debería haber

Gracias, agradezco la respuesta y la posición para sacar JavaScript de la sintaxis de LESS.

Sin embargo, no verse obligado a asociar el valor de retorno de un mixin con una propiedad específica parece un caso de uso tan claro. Cualquiera que use una cuadrícula querrá hacer lo que @Deltachaos estaba tratando de hacer. Sería genial poder lograr esto sin caer al nivel de crear un complemento.

Es algo complicado, si necesita tener bucles o si necesita vivir en un complemento.

Sin embargo, si llama a 3 funciones menos con valores específicos, estoy de acuerdo en que tiene sentido poder extraer eso dentro de less para hacer que la sintaxis sea DRY; no tiene sentido tener que escribir un complemento para extraer el hecho de que desea oscurecer en un 5% en un solo lugar.

Lo he vuelto a abrir, pero esto podría estar duplicado en otro lugar, ya veremos.

por el momento, las variables de un alcance de mixins se copian todas en el alcance externo, que es una especie de forma de devolver variables ... pero está causando problemas horribles y quiero eliminarlo.

duplicado de # 538

"las variables de un alcance de mixins se copian todas en el alcance externo"

Ugh, ¿en serio? Sí, eliminemos ese comportamiento. Preferiría que las variables estén marcadas para la exportación, o alguna otra cosa que solo una fuga automática. Ese no es un comportamiento esperado para mí. Las variables deben tener un alcance de bloque.

sí, es como funciones de apoyo a través de un error de puerta trasera

Encuentro un truco: si declaras una función js global, ¡puedes usarla más tarde!

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

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

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

@fabienevain han encontrado el mismo truco hace un momento :)

@fabienevain Funciona bien, gracias ~: +1:

Descubrí que puede crear funciones reales desde la misma cárcel de evaluación accediendo a process.mainModule ... El único problema es que es posible que tenga que iterar sobre process.mainModule.children y hacer coincidir less.js si ese orden por alguna razón cambia en futuro. Planeo no iterar solo confiando ciegamente menos en el tercer módulo.

Desafortunadamente, no puede acceder a require , pero puede acceder a fs y otros que ya son requeridos por menos, lo cual es suficiente:

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

Lo bueno de tener una función real es esta variable context , que contiene detalles jugosos como el archivo que se está procesando para que pueda, por ejemplo, crear su propia importación de uri de datos svg con configuraciones, etc.

Editar Me pregunto por qué incluso se introducen comillas inversas si se intenta mantener fuera JS. Me gusta que mi MENOS sea lo más copiable y pegable posible, por lo que los complementos no son buenos para mí.

Me gusta que mi MENOS sea lo más copiable y pegable posible, por lo que los complementos no son buenos para mí.

Por lo tanto, asume que su código es "copiar y pegar" incluso si necesita un compilador de less.js basado en node.js en sus hacks de comillas invertidas en línea, pero al mismo tiempo, ¿cree que va mal si usa complementos? Doh!

@ seven-phase-max mis herramientas están bastante estropeadas. Si pudiera controlar los argumentos de la línea de comandos de lessc, probablemente usaría complementos. (O tener un complemento maestro donde guardo todo) Pero no, arruiné mi entorno y tengo ~ 100 temas de WP en el espacio de trabajo de Eclipse de los que no puedo deshacerme porque todos los comandos de compilación, etc.están atascados allí .

@Ciantic En primer lugar, no necesita ninguna opción de línea de comando en particular para usar un complemento de funciones personalizadas, si es necesario (# 2479). Secundario, dudo que cualquier entorno profundamente jodido le prohíba controlar las opciones del compilador (después de todo lessc "ejecutable" es solo un script de consola del sistema operativo que redirige al script de nodo real, por lo que uno puede fácilmente inyectar _cualquier cosa_ allí de una forma u otra).

De cualquier manera, mi comentario fue solo sobre "copiar y pegar frente a complementos" adv. mientras que resulta ser solo una solución para una cadena / herramientas de construcción rota.

¡El complemento de importación @ seven-phase-max parece exactamente la herramienta que necesito! Aunque me gustaría definir las funciones dentro de mi proyecto, no en el registro global, de esta manera puedo editar las funciones dentro del proyecto y no preocuparme por romper mil millones de archivos menos si hago un cambio en la función global.

@Ciantic

Aunque me gustaría definir las funciones dentro de mi proyecto, no en el registro global, de esta manera puedo editar las funciones dentro del proyecto y no preocuparme por romper mil millones de archivos menos si hago un cambio en la función global.

Lea más en. El borrador inicial de mi solicitud de extracción fue la ruta fácil del registro global, pero con algunos conocimientos adquiridos, luego lo refiné para hacer un registro local de alcance. P.ej

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

no filtrará my-func fuera del alcance de la mezcla. Por supuesto, las rutas también son relativas al archivo que contiene la declaración @plugin , por lo que todo está ordenadamente empaquetado y se puede enviar para que lo consuman terceros; 100% _transparante_.

Ese era mi objetivo de diseño para esta función. ^ _ ^

less.js es necesario para agregar una combinación de colores personalizada
el problema ocurre durante la confirmación del código
es compatible pero necesita less.js

Encuentro un truco: si declaras una función js global, ¡puedes usarla más tarde!

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

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

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

@fabienevain ¿Cómo puedo usar menos funciones en @fn ? Como hsvsaturation 、 unit y así sucesivamente .Thx.

@hiyangguo

No deberías usar expresiones JS en línea, punto.
Cree y registre funciones personalizadas de la forma adecuada.
Lea la documentación. Todo está ahí: http://lesscss.org/features/#plugin -atrules-feature

@rjgotten OK, muchas gracias.