将两个.less文件合并成一个 [英] Combining two .less files in one

问题描述

假设我有两个较少的文件， first.less

Suppose I have two less files, first.less

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

和 second.less

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

我想要一种将它们组合成一个合并树的方法： / p>

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

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

因此，类似于编译 .css ，但保留 .less 结构。

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?

推荐答案

什么@helderdarocha意味着，你可以写原生的javascript并使用node.js运行它。
例如参见 http://lesscss.org/#using-less-使用代码和 http://onedayitwillmake.com/blog/2013/03/compiling-less-from-a-node-js-script/

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/

1. 通过以下方式安装：npm install less（此wil创建一个node_modules目录）


2. 创建您的second.less文件



3. 创建一个test.js文件，如：

1. install less with: npm install less (this wil create a node_modules directory)
2. create your second.less file

3. 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（））;
}）;
}）;

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

now you could run: >> node test.js

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

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.

NB在你使用括号中的 @import（first.less）; ，你应该使用 @importfirst.less;

NB In your you use @import("first.less"); with parentheses, you should use @import "first.less";

这篇关于将两个.less文件合并成一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！