CodeKit 2-用代码中的空行少编译

Question

I'm using Codekit 2.1.8 to compile my LESS files. In my LESS files I have empty lines and I want to have them in compilied CSS file too, but Codekit seems to delete them. I can't find any options in Codekit related to this issue.

Example:

LESS file:

p {
    font-size: 14px;
}



a {
    color: red;
}

Compilied CSS file with Codekit:

p {
    font-size: 14px;
}
a {
    color: red;
}

Answer 1

When using the default command line or client side you can easily add your own plugins since v2. Less preserves /**/ comments.

Add in your LESS code for instance /*3*/ for 3 newlines.

Now write the plugin, call this file less-plugin-add-newlines.js :

var getCommentsProcessor = require("./comments-processor");

module.exports = {
    install: function(less, pluginManager) {
        var CommentsProcessor = getCommentsProcessor(less);
        pluginManager.addPostProcessor(new CommentsProcessor());
    }
};

Than write the comments-processor.js :

String.prototype.repeat = function( num )
{
    return new Array( num + 1 ).join( this );
}


module.exports = function(less) {
    function CommentProcessor(options) {
        this.options = options || {};
    };

    CommentProcessor.prototype = {
        process: function (css) {
            var r = new RegExp("(\\/\\*)([0-9]+)(\\*\\/)","g");
            return css.replace(r,function(m1,m2,m3){ return "\n".repeat(m3*1-1); });
        }
    };

    return CommentProcessor;
};

less

p1 {
p:3;
}
/*3*/
p2 {
p:3;
}
/*4*/
p2 {
p:3;
}

The preceding will compile into when running lessc --plugin=less-plugin-add-newlines.js index.less :

p1 {
  p: 3;
}



p2 {
  p: 3;
}




p2 {
  p: 3;
}