将 LESS 颜色定义编译为 JavaScript [关闭]答案

【问题标题】：Compiling LESS color definitions to JavaScript [closed]将 LESS 颜色定义编译为 JavaScript [关闭]
【发布时间】：2015-03-25 19:52:11
【问题描述】：

我有一个带有颜色定义的 LESS 文件：

@RED: #CE1512;
@BLUE: #3E83A0;
// ...

我现在也需要在我的 JavaScript 中使用这些颜色定义。

如何最好地在 LESS 和 JavaScript 之间共享这样的代码？

【问题讨论】：

那么这是一个最佳的“实践问题”（题外话：固执己见）还是“是否有图书馆可以做到这一点”（题外话：工具请求）问题？
你的js为什么需要它？它不应该只是使用类吗？
@cimmanon 可能两者兼而有之。我会删除帖子。但我感谢那些参与进来的人。我相信除了 StackOverflow 之外的另一个社区，他们为我的编程问题提供了快速合理的回答。（编辑：我显然无法删除答案。添加了关闭标志）
无论哪种方式，您都可以将像 {red: "#CE1512", blue: #3E83A0"} 这样的 JSON 传递给您的 Less（对于 gulp-less 是 modifyVars 选项）和 JavaScript 代码。 More over Less 可以强制to `compile to "pseudo-JSON" （尽管这需要一些额外的东西，比如定义你想要“导出”的变量列表）。
@seven-phases-max 听起来比下面的解决方案更理想。想将该评论转化为答案吗？

标签： javascript less

【解决方案1】：

我最终想出了自己的解决方案，但我想我会尽量避免一起使用它（根据reasons listed by alttag）。

Vohuman's answer 提供了另一种解决方案，但我不太喜欢将 js 直接嵌入到我的 LESS 文件中的想法，因此更喜欢下面这样的方法。

我创建了以下node.js 模块，它将读取一个json文件并输出一个less文件。

var fs = require('fs');
var EOL = require('os').EOL;

module.exports = function (jsonFile, outputFileName) {
    var json = require(jsonFile);
    var lessFileContent = "";

    for (color in json) {
        var lessColorDefinition = '@' + color + ': ' + json[color] + ';';
        lessFileContent += lessColorDefinition + EOL;
    };

    fs.writeFile(outputFileName, lessFileContent);
};

示例 json 文件：

{
  "RED": "#CE1512",
  "BLUE": "#3E83A0"
}

Gulp 任务中的使用示例：

var j2l = require('./baseStyles/jsonToLess');

gulp.task('build-base-less', function() {
    j2l('./colors.json', 'colors.less');
});

【讨论】：

非常好的方法。我会在我的项目中使用它。您获得了因该问题而失去的积分；）

【解决方案2】：

对您的一个问题的简短回答是否定的，不，在您的 javascript 中使用它不是一个好主意。一般来说，最好将颜色和其他视觉信息保存在 CSS 中，并将行为信息保存在 javascript 中。

例外情况应该非常罕见。

【讨论】：

【解决方案3】：

这是个好主意吗？

这取决于应用程序的需求及其结构。如果你有这么多变量并且你的 JavaScript 非常需要它们，那么这是有道理的。否则也可以考虑在两个环境中都存在重复项。

哪个应该是预编译源？（js或更少）

作为 LESS 编译器的 JavaScript 也可以理解 JavaScript；但是，在这种情况下，JSON 是最好的选择。

这样的东西已经存在了吗？

您可以创建一个 json 文件和import it in your LESS file。在 JavaScript 中，可以使用 Ajax 轻松加载文件。

【讨论】：