Funzioni definite dall'utente con LessCSS?

Question

Sono appena ottenuto in LessCSS e sono in esecuzione in quello che sento è importante limitazione e mi chiedevo se ci fosse un modo per fare questo ?? Voglio dire che ho letto da qualche parte che Sass consente funzioni definite dall'utente, ma LessCSS farà lo stesso?

Quello che sto volendo fare:

@fs: 16; 

// either return the value 
.s(@t,@s,@u) { 
    // return @t/@s*@u; 
} 
#elem { 
    margin-top: .s(30,@fs,1em); 
    width: .s(900,@fs,1em); 
    .child { 
     width: .s(100,900,100%); 
    } 
} 

// or have a property argument 
.s(@t,@s,@u,@p) { 
    @{p}: @t/@s*@u; 
} 
#elem { 
    .s(30,@fs,1em,margin-top); 
    .s(900,@fs,1em,width); 
    .child { 
     .s(100,900,100%,width); 
    } 
} 

L'unico modo in cui posso capirlo, ma è molto limitata perché devo avere più mixins:

.s(@t,@s,@u,@p) when (@p = margin-top) { margin-top: @t/@s*@u; } 
// margin[-top|-right|-bottom|-left] 
// padding[-top|-right|-bottom|-left] 
.s(@t,@s,@u,@p) when (@p = width) { width: @t/@s*@u; } 
.s(@t,@s,@u,@p) when (@p = height) { height: @t/@s*@u; } 

lo so posso sempre modificare il file less.js per aggiungere una funzione di distanza, come il built-in round() o ceil() funzione. Ma questo elimina la possibilità di compilare i file .less per la produzione usando LessPHP, Crunch, SimpLess.

Answer 1

Per quanto ne so, non c'è alcun argomento di proprietà: è necessario scrivere.

Cioè, una funzione restituirà un valore calcolato o istruzione (s) (di proprietà/i e valori calcolati).

non ci sono migliaia di immobili in CSS, non è un CMS con centinaia di classi e funzioni, così il vostro elenco non sarà fino a quando si può immaginare. Dovresti usare altri preprocessori CSS o un linguaggio di back-end per generare il tuo CSS se vuoi fare cose così complicate. O meglio, tienilo semplice.
Detto questo, lessphp allows for user functions:

lessphp ha una semplice interfaccia interno da cui è possibile implementare funzioni utente che verranno esposti nel codice di meno durante la compilazione. Possono essere un po 'complicati anche se è necessario lavorare con il sistema di tipo lessphp.

Answer 2

Si noti che è anche possibile aggiungere facilmente funzioni personalizzate ai meno compilatore di default, che consentono di utilizzare il client lato less.js compilatore per il test e la riga di comando lessc compilatore per la produzione.

For Less 1.x

1. scaricare e decomprimere la fonte da github a: https://github.com/less/less.js/releases/latest
2. Run npm install
3. Aprire il file di lib/functions.js

4. Aggiungere la funzione personalizzata (returncenter() in questo esempio) all'interno dell'oggetto tree.functions, ad esempio come segue:

   tree.functions = { 
   returncenter: function() { 
   return new(tree.Anonymous)('center'); 
   }, 
   //original function below 
   } 
   

5. Run grunt dist

Dopo il passaggio precedente è possibile includere dist/meno 1.x.x/js nel vostro HTML o compilare il codice Meno con la dist/lessc compilatore.

For Less 2.x

1. Scaricare e decomprimere la fonte da github a: https://github.com/less/less.js/archive/master.zip
2. Run npm install

3. Creare un file caleld lib/less/functions/custom.js e scrivere il seguente contenuto in esso:

   var Anonymous = require("../tree/anonymous"), 
       functionRegistry = require("./function-registry"); 
   
   functionRegistry.addMultiple({ 
   returncenter: function() { 
   return new(Anonymous)('center'); 
   } 
   }); 
   

4. Aperto il file lib/less/function/index.js e aggiungi require("./custom"); all'elenco delle funzioni di registro, subito prima dello return functions;

5. Run grunt dist

Ora è possibile utilizzare il seguente codice di Meno:

selector { 
property: returncenter();  
} 

Il codice Meno precedente compilerà nel seguente codice CSS:

selector { 
property: center;  
}