LESS CSS

LESS is an extension to CSS that adds DRY features such as variables, mixins, operations, and functions. If you’ve felt the agony of repetitious CSS code (read: if you’ve written CSS), it’s time to start using LESS. Fortunately it’s easy to add LESS to your build chain, causing sbt to translate your LESS into CSS during normal compilation. Best of all, since CSS is a valid subset of LESS, you can add the new features when you have time to learn them, on your schedule!

See scalatra-less-css for a minimal and standalone project containing the example in this guide.

Full usage guide

Because LESS is an external project, we won’t attempt to reproduce its documentation here. Go to the official documentation and learn you some LESS!

Set up LESS in Scalatra

Install

Install the plugin by adding the dependency to your project/plugins.sbt:

resolvers += Resolver.url("sbt-plugin-snapshots",
  new URL("http://scalasbt.artifactoryonline.com/scalasbt/sbt-plugin-snapshots/"))(
    Resolver.ivyStylePatterns)

addSbtPlugin("com.bowlingx" %% "xsbt-wro4j-plugin" % "0.3.5")

Enable

Add these imports to the very top of your build.sbt:

import com.bowlingx.sbt.plugins.Wro4jPlugin._
import Wro4jKeys._

Now enable to plugin by adding these lines to your build.sbt, after all your imports. Don’t attempt to remove the blank line!

seq(wro4jSettings: _*)

(webappResources in Compile) <+= (targetFolder in generateResources in Compile)

Configure

Unfortunately, the plugin we’re using does require a bit of configuration.

Create the file src/main/webapp/WEB-INF/wro.xml, telling the compiler where our LESS files are:

<?xml version="1.0" encoding="UTF-8"?>
<groups
    xmlns="http://www.isdc.ro/wro"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd"
    >

  <group name="styles">
    <css>/less/*.less</css>
  </group>
</groups>

Also create the file src/main/webapp/WEB-INF/wro.properties, requesting LESS compilation:

preProcessors = lessCss
postProcessors =

Example

With installation out of the way, you’re free to put your LESS files in src/main/webapp/less. It doesn’t matter what the file/s are called, so long as they have the .less extension we said we’d use in the wro.xml configuration.

For example, create src/main/webapp/less/main.less, which shows off the use of variables in LESS:

@base: #f938ab;

body {
    color: @base
}

That file will be compiled to one called compiled/styles.css, so you can refer to it in your app like this:

class LessCssApp extends ScalatraServlet {

  get("/") {
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="compiled/styles.css" />
      </head>
      <body>
        <h1>This is <a href="http://scalatra.org/2.2/guides/resources/less-css.html">resources/less-css</a>!</h1>
      </body>
    </html>
  }
}

See it in action

Now compile and run your app as usual. If all has gone well, and you’ve used the above example, your text should be pink:

$ cd scalatra-less-css
$ ./sbt
> container:start
> browse

If browse doesn’t launch your browser, manually open http://localhost:8080/ in your browser.

Further documentation

The resources processor we’ve been using, wro4j, is extensively configurable. See the wro4j documentation for more information.