Combining two .less files in one

Question

Suppose I have two less files, first.less

.a {
  .b {
    font-size: 13px;
  }
  color: lime;
}

and second.less

@import "first.less";
.a {
  font-family: sans-serif;
}

I would like a way of combining them into one, merging the trees:

.a {
  .b {
    font-size: 13px;
  }
  color: lime;
  font-family: sans-serif;
}

So, something similar as compiling to .css, but keeping the .less structure. Is it possible to do via a command line tool, library or programmatically?

Using `tree` object (which you obtain when you invoke the Parser) you have access to functions, mixins, variables, etc. It's practically undocumented however (you have to use code introspection and the github discussions as documentation) — helderdarocha, Jun 13 '14 at 12:26
The [Less Parser](http://lesscss.org/#using-less-usage-in-code), using native JavaScript (via node.js). — helderdarocha, Jun 13 '14 at 12:29
I don't get the close vote here. This can be solved by a search only after you find the approach. I think @helderdarocha could write an answer. — Denys Séguret, Jun 13 '14 at 13:34

score 0 · Answer 1 · edited Mar 21 '17 at 14:23

What @helderdarocha means, you can write native javascript and run this with node.js. See for instance http://lesscss.org/#using-less-usage-in-code and http://onedayitwillmake.com/blog/2013/03/compiling-less-from-a-node-js-script/

install less with: npm install less (this wil create a node_modules directory)
create your second.less file
create a test.js file, something like:

    var less = require( 'less' );
    var fs = require( 'fs' );
    var parser = new less.Parser();
    fs.readFile( 'second.less', function ( error, data ) {
      var dataString = data.toString();
      parser.parse(dataString, function ( err, tree ) {
        if ( err ) {
          return console.error( err );
        }
        console.log( tree.toCSS() );
      });
    });

now you could run: >> node test.js

To above will output CSS code and not the Less code you want. To get the desired result you should extend the less code with a toLess() function which can be invoked on tree just like toCSS(). I wonder if this is the best way to get your desired result, what your seem to want is some kind of selector merging. Notice that Less don't merge selectors (see: https://github.com/less/less.js/issues/930). Maybe also take a look at http://css2less.cc/ which merge selectors.

Combining two .less files in one

1 Answers1

Linked