Question

如何通过创建解析器实例，将带有参数的.less文件动态注入较少解析器（less.js编译器）？

我有不同的主题。用户可以选择任何主题。当用户选择主题时，我想在客户端编译带有适当参数的关联.less文件。

function writeCSS(color,other) {
    var lessCode = '';
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
            var options = {}
            lessCode = xmlhttp.responseText;
            less.render(lessCode, options, function (error, output) {
            if (!error) {
                $("style").append(lessCode.css);
            }
            else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
            });
        }
    };
    xmlhttp.open("GET", "/Content/Style.less?baseColorTheme='222222'&otherTheme='222222'&direction='ltr'", true);
    xmlhttp.send();
}

Answer 1

主要有两种方法。通常.less文件作为“资产管道”的一部分预先编译为CSS。此过程由构建自动化或脚本监控，其详细信息因语言和工具集而异。用户选择新主题会将站点的CSS链接更改为预编译的CSS文件。使用jQuery，假设样式表链接如：

<link id="theme-css" rel="stylesheet" href="theme1.css">

改变将如此简单：

var newTheme = 'theme2.css';
$('#theme-css').attr('href', newTheme);

CSS主题转换器is here的工作示例。

但是如果你不想建立一个资产管道来将你的Less文件预编译成等效的CSS，你可以动态地做同样的事情。诀窍是将less.js库加载为脚本，然后再做一些工作来触发主题更改：

var newTheme = 'theme2.less';
$('style[id^=less]').remove();
$('#theme-css').attr('href', newTheme);
less.refresh();

第一行和第三行几乎完全相同。新的第二行是删除less.js将添加为.less资产的编译版本的CSS样式表所必需的。最后一行手动触发less.js运行。

基于Less的主题转换器is here的运行版本。

正如在线Less编译器演示的那样，您可以随意使用Less代码并进行编译。但是，对于主题设置，通常允许在一组已知的源文件之间切换。这至少减少了处理如果较少的源没有良好形成或可编译时出现的错误条件的需要。

如何将带有参数的.less文件注入较少解析器

1 个答案: