Question

从Less版本2开始，您可以使用plugins。您还可以使用这些插件将自定义功能添加到Less，例如：https://github.com/less/less-plugin-advanced-color-functions/和https://github.com/bassjobsen/less-plugin-cubehelix

启发https://github.com/less/less.js/issues/2341我希望将自定义函数twotimesandten添加到less，以便：

@start: 10;
.test {
result: twotimesandten(@start);
}

编译成：

.test {
result: 30;
}

阅读http://lesscss.org/usage/#plugins-for-plugin-authors后，我想知道该怎么做？

Answer 1

首先编写usage in the browser的插件。您可以使用以下代码创建插件：

var TwoTimesAndTen = {
    install: function(less) {
        less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
    }
};
less = { 
    env: "development",
    plugins: [TwoTimesAndTen]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>

请注意，您应该始终将函数的名称写下来。

要为the command line compiler使用上述代码，您应该创建一个名为less-plugin-twotimesandten/index.js的文件。该文件应包含以下代码：

var TwoTimesAndTen = {
    install: function(less) {
        less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
    }
};
module.exports = TwoTimesAndTen;

然后，您可以在控制台中运行以下命令：

echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --plugin=less-plugin-twotimesandten/index.js -

以上将输出：

.test {
  result: 30;
}

要安装此插件以供全局使用，您应该创建名为less-plugin-twotimesandten/package.json的第二个文件。 package.json应至少包含以下代码行：

{
    "name": "less-plugin-twotimesandten",
    "version": "0.0.1",
    "description": "twotimesandten plugin for less.js",
    "main": "index.js"
}

保存package.json文件后，您可以在控制台中运行以下命令：

npm install less-plugin-twotimesandten

确保首先在less-plugin-twotimesandten目录之外导航。在上面的命令中，less-plugin-twotimesandten是插件的路径。

现在您可以运行以下命令：

echo '@start: 10; .test { result:twotimesandten(@start); }' | lessc --twotimesandten -

要编写一个同时运行客户端和服务器端的插件，您应该阅读：http://caolanmcmahon.com/posts/writing_for_node_and_the_browser/（也可以免费提供给https://github.com/less/less-meta/issues/5）。

重写less-plugin-twotimesandten/index.js的内容，如下所示：

(function(exports){
    exports.install= function(less) {
     less.functions.functionRegistry.add('twotimesandten' ,function(input) { return new(less.tree.Anonymous)(input.value * 2 + 10);} );
      };
})(typeof exports === 'undefined'? this['TwoTimesAndTen']={}: exports);

以上内容不会改变命令行用法。对于更广泛的使用，您现在可以使用以下代码：

<script src="less-plugin-twotimesandten/index.js"></script>
<script>
less = { 
    env: "development",
    plugins: [TwoTimesAndTen]
};
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>

如何使用利用插件的自定义函数扩展Less编译器

1 个答案: