Overview

HTTPS SSH

LESS for Fantom

LESS for Fantom wraps the LESS CSS language for easier integration into Fantom projects. The Fantom pod supports an programmer API, a command line interface, and a build::Task for integration into build pipelines.

Installing

fanr install -r http://repo.status302.com/fanr/ less

API

If you simply want to compile LESS to CSS from Fantom, just use the API, which takes a LESS source string, and returns the output CSS string:

css := Less { str=less }.toCss

If you wish to use @import with the API method, you must use file references, so Less can resolve the imported files:

css := Less { file=`example.less`.toFile }.toCss

Command Line

The CLI takes a source .less file and writes a target .css file:

$ fan less foo.less bar.css

Build Task

To integrate LESS into a build script, simply add a new build target to invoke LessTask. If you'd like the LESS task to be part of the default target, simply override the existing BuildPod.compile target:

class Build : BuildPod
{
  new make()
  {
    podName = "example"
    summary = "Example Pod"
    version = Version("1.0")
    depends = ["sys 1.0", "less 1.1.5"]
    srcDirs = [`fan/`, `test/`]
    resDirs = [`res/css/`]
  }

  @Target { help = "Compile to pod file and associated natives" }
  override Void compile()
  {
    less
    super.compile
  }

  @Target { help = "Compile less to css" }
  virtual Void less()
  {
    LessTask(this).run
  }
}

By default the LessTask will look for .less source files under {scriptDir}/less/, and will write output CSS into {scriptDir}/res/css. The task will recursively find and write files with the matching directory structures.

If you want to use a different source and/or output directory, just configure those fields on your LessTask:

@Target { help = "Compile less to css" }
virtual Void less()
{
  LessTask(this)
  {
    srcDir = scriptDir + `some/dir/`
    outDir = scriptDir + `some/other/dir`
  }.run
}

Build Task and @HILLARY ATKINS

When using LessTask, note that any file that is used as an @import in another file will be excluded from the CSS output. Which means if you wish to use a LESS file as both an import and an output CSS file, you will need to break the import content out into a separate file, and use a simple shell LESS file:

import "base.less";