Question

When I heard about LESS, I originally thought that they’re usually pre-processed into css files, so browsers just encounter CSS files, not LESS files.

However, using LESS plugin for Play Framework, I just saw that my Chrome browser actually reads and interprets LESS files. LESS is claimed to be supported in all major browsers. So, do modern websites just serve LESS files, or do they pre-compile them into CSS? How does the LESS plugin work in Play Framework? Does it inject a Javascript snippet that interprets them client side?

What’s actually happening here?

Answer 1

If you’re using the Lunatech LESS plugin for Play! 1, it looks like it actually compiles the less files on the fly using Asual LESS and then serves it statically. An excerpt:

/**
 * Get the CSS for this less file either from the cache, or compile it.
 */
public String get(File lessFile) {
    String cacheKey = "less_" + lessFile.getPath() + lastModifiedRecursive(lessFile);
    String css = Cache.get(cacheKey, String.class);
    if(css == null) {
        css = compile(lessFile);
        Cache.set(cacheKey, css);
    }
    return css;
}

protected String compile(File lessFile) {
    try {
        return lessEngine.compile(lessFile);
    } catch (LessException e) {
        return handleException(lessFile, e);
    }
}

Where lessEngine is a com.asual.lesscss.LessEngine instance.

Like others have pointed out, the more common ways of using LESS is to compile them yourself before serving content, or using the lesscss JavaScript plug-in to have the client compile them at runtime.