# LESS for Fantom LESS for Fantom wraps the [LESS](http://lesscss.org/ "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 @imports 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";