myless

myless

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 myless.util.java.

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){
    if(err){
        less.util.console.log('<red>parse less file error info</red>:\n <pink>%s</pink>', err);
    }else{
        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 -->
    CODE_END);

    background-iamge: svg-cont('width=80px', 'height=80px', <<<EOF
        <!-- you svg code here -->
    EOF);    

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);
    setTimeout(function(){
        if(sum <= 0){
            var err = 'wrong paramaters!';
            done(err, null);
        }else{
            var ret = myless.util.value.toLessNum(sum, 'px');
            done(null, ret);
        }
    }, 1000);
};

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

div {
    width : fn1(10, 20);
    height: fn2(20, 20);    
}