1. Andy Frank
  2. less

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";