Question

我可以解析LESS客户端，并返回结果吗？

我目前正在使用文档中的建议，其中包括较少的文件，以及之后缩小的解析器。我希望能够返回原始css，以便将其保存为css文件。

我不想安装node.js等，我想要一个客户端解决方案。

Answer 1

查看less.js source会显示Parser对象。假设页面中包含less.js：

var data = "@colour: red; #example { background-color: @colour; }",
    parser = new less.Parser({});

parser.parse(data, function (error, root) { 
    // code that handles the parsed data here...
    // e.g.:
    console.log( root.toCSS() ); 
});

将以下内容输出到控制台：

#example {
  background-color: #ff0000;
}

less.Parser的构造函数实际上需要进行一系列设置，我不太了解LESS的内部说法可能会传递什么（虽然它们都是可选的，所以传递none只应该使用默认值）。

Parser.parse方法有两个参数：一个包含LESS文件的字符串，以及一个处理解析数据的回调。回调最多接收两个参数，一个错误对象（error）和一个表示已解析的LESS（root）的对象。如果发生致命错误，则不会传递root，如果没有错误，error将为null。

不幸的是，我找不到关于错误参数属性的更好的文档，而不是它们在源here中设置的位置。

Answer 2

这是一个工作示例： https://jsfiddle.net/y0oss091/1/

#define ESRCH        3  /* No such process */

从CDN加载较少。

那里有很多资源但是，我不确定客户端使用是否比安装npm和node更容易。

Answer 3

@ dbaupp的答案对我非常有帮助，但我没有发现错误处理是他的回答中所描述的。

我发现在解析较少的客户端而不是传递给error参数时会抛出错误，这意味着你无法在解析回调中对它们作出反应。

// I too have no idea what to pass to less.Parser
// but none of them seemed very useful for this
// reading through the source
var parser = new less.Parser( {} ),
    toparse = '.foo {color: red;}';

try {
    parser.parse( function ( error, root ) {
        var css = root.toCSS();
        console.log( css );
    } );
} catch ( e ) {
    // if we hit a 404 when importing a less file
    // this is only thrown at the end of all the imports
    // rather than as soon as it find one broken @import
    if ( e.name === 'TypeError' && e.message === "Cannot call method 'toCSS' of undefined" ) {
        // handle typeerror here

    // if there's a parse error
    // assuming your original less file is just some @imports
    // this will also tell you which file contains the error
    } else if ( e.line ) {
        // the url of the imported file
        console.log( e.filename );

        // the line containing the error
        console.log( e.line );

        // this is a 3 item array containing the line with the error
        // +/- 1 line either side
        // e.extract[1] will be your error
        console.log( e.extract );

        // this is the error message
        console.log( e.message );
    } else {
        // it broke some other way
        // I haven't had this happen to me yet
        // so you'll have to figure it out for yourself ;)
    }
}

作为这可能有用的示例，我的应用程序正在添加对mediawiki的支持，我无法访问任何服务器端，但可以访问网站的css和js文件。我可以解析自己越少，用新解析的更少意义替换现有的css我是唯一一个需要js才能工作的人：）

解析LESS客户端

3 个答案: