Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »


0.0.18 • Public • Published


myless is a less commpile tool based on less2.5.3, add the following features for less:

  • support multiline string.
  • enable use to extend less support function through add file at specify path.
  • enable to extend less support function throw install npm package.
  • enable to call a java function which the jar files supported through

works before install

for mac

  • install libpng by : brew install libpng. if you don't use function png8-data-uri or png8-tbcdn-uri then you can skip this step.
  • install java jdk. if you don't use svg-to-png function then you can skip this step.
  • taobao intranet user please edit file: ~/.myless/conf.json

for windows

  • install java jdk. if you don't use svg-to-png function then you can skip this step.

how to use

var fs = require('fs');
var Myless = require(myless);
var option = {ieCompat: false};
var less = new Myless({
    show_degbug_log: true, 
    max_wait_time: 5, 
    auto_close: true      // when use myless at watch mode, remove this property
less.parse('src/main.less', option, function(err, result){
        less.util.console.log('<red>parse less file error info</red>:\n <pink>%s</pink>', err);
        fs.writeFileSync('src/main.css', result.css, 'utf8'); 

extend functions

  • abs-path(String: pic-path)
  • pic-width(Sring: pic-path)
  • pic-h-w-rate(String: pic-path)
  • pic-height(String: pic-path)
  • png8-data-uri(String: png24-file-path)
  • png8-tbcdn-uri(String: png24-file-path). taobao intranet only!
  • tbcdn-uri(String: pic-path). taobao intranet only!
  • svg-cont(String... svg_attr, String: svg_cont). generate svg data uri by input svg attribute and svg content. for example:
   backgbround: svg-cont('width=80px', 'height=80px', <<EOF
      <!-- your svg code here -->
   EOF) center cente no-repeat;
  • svg-to-png(String: save-path, String...: svg-attrs, String: svg-cont). call apache batik to convert svg to png, return the absolute path of the png file. for example:
   backgbround: png8-data-uri(svg-to-png('./my-png.png', 'width=80px', 'height=80px', <<EOF
      <!-- your svg code here -->
   EOF)) center cente no-repeat;
  • escape-utf8(String: utf8-str). escape utf8 charactors to "***\xxxx***" for example:
  div:before { content: escape-utf8('中文'); }

extend grammer

  • multiline string。 you can input multiline string in the form : <{2,}(\w+)...\1, for example :
    background-iamge: svg-cont('width=80px', 'height=80px', <<CODE_END
        <!-- you svg code here -->
    background-iamge: svg-cont('width=80px', 'height=80px', <<<EOF
        <!-- you svg code here -->

how to extend less function youself.

grunt-myless will crate a folder named myless at the project root path when it run first time. the folder myless has two sub-folder: data, functions。suppose we want to extend to function: fn1 and fn2, and fn1 is a sync function then fn2 is a async function.

first, we need to create two js file at the folder: "your/project/src/myless/functions". the neme of two files were : fn1.js and asy-fn2.js。the prefix asy- means is a async function.

sencod, to implements two functions as following form.

// fn1.js content
module.exports = function(myless, param1, param2){
    var sum = parseInt(param1.value, 10) + parseInt(param2.value, 10);
    return myless.util.value.toLessNum(sum, 'px');
// asy-fn2.js content
module.exports = function(myless, done, param1, param2){
    var sum = parseInt(param1.value, 10) + parseInt(param2.value, 10);
        if(sum <= 0){
            var err = 'wrong paramaters!';
            done(err, null);
            var ret = myless.util.value.toLessNum(sum, 'px');
            done(null, ret);
    }, 1000);

third, use functions at you less file, for example:

div {
    width : fn1(1020);
    height: fn2(2020);    


npm i myless

Downloadsweekly downloads






last publish


  • avatar
Report a vulnerability