Compiling LESS color definitions to JavaScript

Question

I have a LESS file with color definitions:

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

I now have need of using these color definitions in my JavaScript as well.

How best to share code like this between LESS and JavaScript?

So is this a best "practices question" (off-topic: opinionated) or a "is there a library that does this" (off-topic: tool request) question? — cimmanon, Mar 25 '15 at 19:54
why does your js need it? shouldn't it just be using classes? — Daniel A. White, Mar 25 '15 at 19:55
@cimmanon probably both. I'll delete the post. But I am thankful for those who weighed in. I which I had faith in another community besides StackOverflow for providing quick and reasonable responses for my programming questions. (edit: I can't delete with answers apparently. Added a close flag) — Zach Lysobey, Mar 25 '15 at 20:03
Either way you can pass a JSON like `{red: "#CE1512", blue: #3E83A0"}` to both your Less (for `gulp-less` it's `modifyVars` option) and JavaScript code. More over Less can be forced [to `compile to "pseudo-JSON"](https://github.com/less/less.js/issues/2231#issuecomment-61882386) (though this need some addition stuff like defining the list of variable you want to "export"). — seven-phases-max, Mar 25 '15 at 21:12
@seven-phases-max that sounds like a more ideal solution than the ones below. Wanna massage that comment into an answer? — Zach Lysobey, Mar 25 '15 at 21:48
I'm lazy :) Especially since it's about to be closed. Please feel free to write answer yourself (I'll be glad to upvote it and also vote for Q reopening if you remove "opinion-based" parts stuff from there). — seven-phases-max, Mar 25 '15 at 21:56

score 3 · Answer 1 · edited May 23 '17 at 11:58

I ended up coming up with my own solution, though I think I will try to avoid using it all-together (per the reasons listed by alttag).

Vohuman's answer provides another solution, but I don't really like the idea of embedding js directly in my LESS file, so would prefer an approach like below.

I created the following node.js module which will read a json file and output a less file.

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);
};

Example json file:

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

Example usage in Gulp task:

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

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

very nice aproach.. I would use this in my projects. you earned points you lost for the question ;) — Shubham Bhave, Apr 01 '15 at 13:31

score 1 · Answer 2 · answered Mar 25 '15 at 19:56

The short answer to one of your questions is no, no it is not a good idea to use it in your javascript. In general, it is best to keep color and other visual information in CSS, and behavior information in javascript.

Exceptions should be exceedingly rare.

score 1 · Answer 3 · edited May 23 '17 at 12:30

Is this even a good idea?

It depends on the application needs and how it's structured. If you have so many variables and your JavaScript heavily needs them then it makes sense. Otherwise having duplicates in both environments can be considered too.

Which should be the pre-compiled source? (js or less)

JavaScript as LESS compiler also understands JavaScript; however, JSON, in this case is the best option.

Does something like this already exist?

You could create a json file and import it in your LESS file. In JavaScript the file can be easily loaded by using Ajax.

Compiling LESS color definitions to JavaScript

3 Answers3