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

Question

从 Less 的第 2 版开始，您可以使用 plugins. You can also use these plugins to add custom function to Less, examples: https://github.com/less/less-plugin-advanced-color-functions/ and https://github.com/bassjobsen/less-plugin-cubehelix

受到 https://github.com/less/less.js/issues/2341 的启发，我想向 less 添加自定义函数 twotimesandten，以便：

@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/ (feel free to contribute to 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 编译器

How to exend the Less compiler with a custom function leveraging a plugin

javascript

less

less-plugins