LessCss is a nifty extension to the core CSS language to support variables, calculated values, inclusion-by-reference, nesting, and some other goodies. Basically the idea is to simplify and reduce duplication in large stylesheets. Here's a simple example of a variable and a computed value:
@color: #fdd;
#header {
background-color: @color;
color: @color / 2;
}
That translates into the following CSS:
#header {
background-color: #ffdddd;
color: #7f6e6e;
}
Unfortunately, browsers don't understand LESS, they only understand CSS, so you have to compile it. Even worse, LESS is implemented as a Ruby gem and/or Rails plugin, which makes it annoyingly complex to deal with.
Fortunately, JRuby and CFGroovy2 will happily smooth things over, and let you do the translation on demand. For development, this maintains the CTRL-S/ALT-TAB/F5 workflow that we all know and love. For production, the compilation would be better done during your release creation process, but for sites without a pile of traffic, doing it dynamically is probably no big deal. You might also want a rewrite engine (like mod_rewrite) to make your URLs prettier or offload the existence checks, but I've not addressed that here.
First, your HTML needs to be changes to have LINK tags like this (this is why the rewrite solution is ideal):
<link rel="stylesheet" href="lesscss.cfm?p=style.less" type="text/css" />
Then you need lesscss.cfm, of course:
<cfimport prefix="g" taglib="cfgroovy2" />
<cfparam name="url.p" />
<cfset thisDir = getDirectoryFromPath(getCurrentTemplatePath()) />
<g:script>
src = new File(variables.thisDir + url.p)
dest = new File(src.parentFile, src.name.replaceAll(/\.le?ss/, ".css"))
variables.regenerate = ! dest.exists() || src.lastModified() >= dest.lastModified()
variables.srcPath = src.canonicalPath
variables.destPath = dest.canonicalPath
</g:script>
<cfif regenerate>
<g:script lang="ruby">
require 'less'
$variables["css"] = Less::Engine.new(File.new($variables["srcPath"])).to_css
</g:script>
<cffile action="write"
file="#destPath#"
output="#css#" />
</cfif>
<cfcontent type="text/css" file="#destPath#" />
Before that'll run, you'll need CFGroovy2 installed (and possibly update the CFIMPORT tag to point at the right location). You'll also need Groovy, JRuby, the JRuby libs, and Less installed into your /WEB-INF/lib folder. CFGroovy2 can bootstrap it's own Groovy, but since you have to drop JAR for the JRuby and Less pieces, it's easier to just do the same for Groovy. Here's the JARs:
- groovy-all-1.6.x.jar (available from http://groovy.codehaus.org/Download) as part of the standard binary release (in the 'embeddable' folder).
- jruby.jar and profile.jar (available from http://www.jruby.org/download) as part of the standard binary release (in the 'lib' folder).
- jruby-engine.jar – the scripting bindings for JRuby (also available from https://scripting.dev.java.net/servlets/ProjectDocumentList).
- jruby-libs.jar – a bundling of the JRuby runtime for running within the JVM instead of on the command line (custom).
- jruby-less.jar – a bunding of the Less gem for running within the JVM instead of on the command line (custom).
With that, restart your server, write yourself a Less file (or grab the sample at the top), and fire 'er up!
LESS is really cool. I did something similar in Java and it's probably applicable to ColdFusion too: http://www.asual.com/lesscss/. I still haven't announced it officially because I continue making improvements and probably will add YUI Compressor support.
One tricky part with such implementation is that if you use @import in the CSS file then such a regeneration check won't be enough.
That's a lot of work for something as simple as a CSS. It would be better to restructure the HTML and CSS or make a CSS per category: font, colour, structure, etc.
I, for one, am really pumped to see LessCss coming closer to the CFML world. It looks awesome! I do agree with Sebastian, however, that the amount of installation work does seem disproportionate to the payoff. Maybe one day we can get this built into CF? One can dream, can't he?
Brian
@Sebastiaan, @Brian
Yeah, this is a lot of work if all you want is LESS in your CFML app. But if you're already integrating Groovy and Ruby into the app, then all you need is lesscss.cfm somewhere to point at. And this is something that is done per server, so if you're running several applications on a single CF/Railo/OBD instance, you do this once, and all your apps grow support.
@Rostislav
Using a servelet filter is definitely a better approach, and you can still use the Ruby LESS engine via the JSR-223 interface to JRuby in exactly the same way. Obviously you still have to drop JAR, as well as configure the filter, but for JEE-ish applications, it's a no brainer. Where I've used this, I package UrlRewrite to hand off to a CFM file to do the compilation, mostly because I didn't want to have to compile my own Java class.
I was talking with my college who specialized in doing front-end. We come to a conclusion that most of what LessCss does can be done by CFML just as well, just a Little bit more verbose? :)
##header {
background-color: #FormatBaseN(color, 16)#;
color: #FormatBaseN(color / 2, 16)#;
}
Maybe it'll be a good idea to write a custom tag to do inline LessCss! :)
@color: #fdd;
#header {
background-color: @color;
color: @color / 2;
}
oh… the tags are stripped off.
Just imagine there were <cfoutput> tag on the first example.
And there were <less:css> on the last example.
and… add this to the 1st example… sorry.
<cfset color = InputBaseN("fdd",16)>
@Henry
Yeah, you can certainly do it that way, but then you incur the penalty of CF processing on every stylesheet request, which can place significant extra load on your server. However, your color manipulation is incorrect, you don't want to divide the whole number by 2, you want to divide each color segment (two-digit pair) by two, and then stitch the results back together.
Doing nesting and inclusion are also problematic with simple output tricks. They really require a full language parser so you can manipulate the AST.
All that said, you could certainly package the couple lines of Ruby up into a custom tag to run your tag body through the interpreter and output it, so a <less:css> tag is really reasonable.
Oops, I guess I misunderstood the div 2 operation in LessCss.
Maybe use a simple <cfcache> tag to eliminate penalty of CF processing on every stylesheet request?
Nesting is hard, yes, but my colleague and I don't like it very much.
Mixins can be achieved with <cfsaveoutput>.
CFML is a hammer. :)
[...] CSS was originally implemented in Ruby, and Barney Boisvert has already blogged about using the Ruby implementation in ColdFusion in the past. However the author of Less CSS is now working on a JavaScript version, less.js. This [...]