将两个.less文件合并为一个

Question

假设我有两个less文件，first.less和second.less。

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

还有 second.less

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

我希望有一种将它们合并成一个的方法，合并这些树：

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

所以，是否有类似于编译为.css的方式，但仍保留.less结构呢？是否可以通过命令行工具、库或程序化的方式实现？

- Sklivvz

---

使用tree对象（在调用解析器时获得）可以访问函数、混合、变量等。然而，它几乎没有文档（您必须使用代码内省和GitHub讨论作为文档）。 - helderdarocha

@helderdarocha，你指的是哪个编译器？ - Sklivvz

使用本地JavaScript（通过node.js）的Less解析器。 - helderdarocha

我不明白为什么会有关闭投票。只要找到方法，这个问题就可以通过搜索解决。我认为@helderdarocha可以写一个答案。 - Denys Séguret

Answer 1

@helderdarocha的意思是，你可以编写本地JavaScript代码，并使用node.js运行它。 例如，请参见http://lesscss.org/#using-less-usage-in-code和http://onedayitwillmake.com/blog/2013/03/compiling-less-from-a-node-js-script/

1. 使用npm install less安装less（这将创建一个node_modules目录）
2. 创建您的second.less文件
3. 创建一个test.js文件，类似于：

    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() );
      });
    });

4. 现在你可以运行：>> node test.js

以上将输出 CSS 代码而不是你想要的 Less 代码。为了获得所需的结果，您应该使用 toLess() 函数扩展 less 代码，该函数可以在 tree 上调用，就像 toCSS() 一样。我想知道这是否是获得所需结果的最佳方法，您似乎想要某种选择器合并。请注意，Less 不会合并选择器（参见：https://github.com/less/less.js/issues/930）。也可以看看 http://css2less.cc/，它可以合并选择器。

- Bass Jobsen