Compile LESS to CSS. Adds experimental features that extend Less.js for maintaining UI components, 'bundles' and themes. From Jon Schlinkert, core team member of Less.js. This project is a fork of the popular grunt-contrib-less plugin by the talented Tyler Kellen. Please use that plugin if you require something stable and dependable.
npm install assemble-less> Compile LESS to CSS, with options for creating 'bundles', individual components, themes or whatever makes you happy.
_This project just launched so expect frequent changes._ And if you find this project interesting please consider starring it to receive updates.
assemble-less has many more features than we've been able to document thus far. So while we work to improve the docs, _please let us know if you have any questions or have any trouble getting assemble-less to work. And feel free to create an [Issue][issues], we're here to help._
#### Please visit the wiki
Table of Contents
- Getting Started
- The "less" task
- Options
- Examples
- Using default options
- Using custom options
- Compiling Bootstrap Components
- About
- Contributing
- Authors
- Credit
- Release History
~0.4.1If you haven't used Grunt before, be sure to read the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.
Then install the required local dependencies and this plugin with this command:
``shell`
$ npm install
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
`js`
grunt.loadNpmTasks('assemble-less');
When completed, you'll be able to run the various grunt commands provided:
#### compile - grunt less
Runs the Less.js compiler to rebuild the specified files. Requires Less.js and assemble-less.
#### watch - grunt watch
This is a convenience task to "Run predefined tasks whenever watched file patterns are added, changed or deleted". Requires grunt-contrib-watch, .
Should you encounter problems with installing dependencies or running the grunt commands, be sure to first uninstall any previous versions (global and local) you may have installed, and then rerun npm install.
to the data object passed into grunt.initConfig().`js
grunt.initConfig({
less: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
}
}
});
grunt.loadNpmTasks('assemble-less');grunt.registerTask('default', [
'jshint',
'less'
]);
`
Task targets, files and options may be specified according to the grunt Configuring tasks guide.
Options
$3
> Options developed specifically for the
plugin#### version
Type:
String
Default: _less_Specify the path to the Less.js version that you wish to use for compiling to CSS. Useful for testing to see if one version produces different output than another.
#### lessrc
Type:
Default value: A convenience option for externalizing task options into a
file. If this file is specified, options defined therein will be used. ` javascript
less: {
options: grunt.file.readJSON('.lessrc')
}
`
The file must be valid JSON and looks something like this:` json
{
"require": null,
"concat": false,
"compress": false,
"yuicompress": false,
"optimization": 03,
"strictImports": true,
"dumpLineNumbers": false,
"strictMaths": false,
"strictUnits": false
}
`#### require
Type:
Default: _empty string_Specified files will be _prepended_ to the beginning of src files, _not_ to the concatenated output. This feature is useful for "inlining" globaly-required LESS files, such as
or mixins, so that _they do not need to be referenced with @import statements inside any individual files_.#### concat
Type:
Boolean
Default: _true_Concatenate all source files by default. If you change the value to false, all source files will compile into individual files.
#### globals (under consideration)
Type:
Default: _null_Data object for defining global variables inside the Gruntfile which will be accessible in LESS files.
$3
> These options will be passed through directly to Less.js
See the Less.js documentation for more info about supported options.
#### paths
Type:
Default: _Directory of input files_Specifies directories to scan for
directives when parsing. The default value is the directory of the specified source files. In other words, the paths option allows you to specify paths for your @import statements in the less task as an alternative to specifying a path on every @import statement that appears throughout your LESS files. So instead of doing this:` css
@import "path/to/my/less/files/mixins/mixins.less";
`
you can do this: css
@import "mixins.less";
`#### compress
Type:
Default: _false_Specifies if we should compress the compiled css by removing some whitespaces.
#### yuicompress
Type:
Default: _false_Compress output using cssmin.js.
#### optimization
Type:
Default: nullSet the parser's optimization level. The lower the number, the less nodes it will create in the tree. This could matter for debugging, or if you want to access the individual nodes in the tree.
#### strictImports
Type:
Default: _false_Force evaluation of imports.
#### strictMaths
Type:
Default: _true_Force operations to be enclosed within parenthesis,
.#### strictUnits
Type:
Boolean
Default: _true_Force strict evaluation of units. If set to
the compiler will not throw an error with operations such as (3 * 1em). #### dumpLineNumbers
Type:
String
Default: _false_Configures -sass-debug-info support.
Accepts following values:
, mediaquery, all.
---
Usage Examples
#### Compile
`javascript
less: {
selectors_test: {
files: {
'selectors.css': ['selectors.less']
}
}
}
`#### Concatenate and Compile
As an alternative to using
to "inline" .less files, you can specify an array of src paths and they will be concatenated. `javascript
less: {
dist: {
files: {
'test.css': ['reset.less', 'test.less']
}
}
}
`#### Compile multiple files individually
You can specify multiple
items in files.`javascript
less: {
dist: {
files: {
'test.css': ['test.less'],
'mixins.css': ['mixins.less']
}
}
}
`#### Custom Options
In this example, the
and requires options are used:`js
less: {
development: {
options: {
paths: ['test/fixtures'],
require: [
'globals/variables.less',
'globals/mixins.less'
]
},
files: {
'styles.css': ['styles.less']
}
},
production: {
options: {
paths: ['assets/less'],
yuicompress: true
},
files: {
'styles.min.css': ['styles.less']
}
}
}
`#### Concatenate and Compile
Grunt supports filename expansion (also know as globbing) via the built-in node-glob and minimatch libraries. So Templates may be used in filepaths or glob patterns.
debug: {
options: {
paths: ['<%= tests.debug.import %>']
},
src: ['<%= tests.test.imports %>', 'test/fixtures/*.less'],
dest: 'test/result/debug'
}
For more on glob pattern syntax, see the node-glob and minimatch documentation.Contributing
Want to help make assemble-less even better? All constructive feedback and contributions are welcome, so please consider contributing! We can always use help creating, tests, documentation or resolving Issues, but if you have other ideas for how you can help, Brian and I would love to hear them!https://github.com/assemble/assemble-less/issues
About
assemble-less is a powerful and flexible Grunt plugin for compiling LESS to CSS. The task leverages JSON and Lo-dash templates for defining any number of LESS "bundles", UI components, compressed stylesheets or themes.
$3
* assemble: a Grunt plugin for quickly launching static web projects by emphasizing a strong separation of concerns between structure, style, content and configuration.
* less-tests: a LESS / CSS test-suite that uses assemble-less to enable you to run any kind of test on LESS stylesheets.
$3
This Grunt.js plugin and some of the documentation on this page, is derived from grunt-contrib-less, authored by Tyler Kellen. This plugin was modified for this project to concat` LESS files first, and then compile them into CSS files. This allows for prepending globally required LESS files, and it also adds the ability to build out individual CSS files, rather than building a single conctatenated file.
Jon Schlinkert
+ http://twitter.com/jonschlinkert
+ http://github.com/jonschlinkert
Brian Woodward
+ http://twitter.com/doowb
+ http://github.com/doowb
---
Authored by assemble
_This file was generated using Grunt and assemble on Sun Mar 24 2013 15:34:47._
[download]: https://github.com/assemble/assemble-less/zipball/master
[org]: https://github.com/assemble
[assemble]: https://github.com/assemble/assemble
[issues]: https://github.com/assemble/assemble/issues
[wiki]: https://github.com/assemble/assemble/wiki
[config]: https://github.com/assemble/assemble/wiki/Configuration
[gruntfile]: https://github.com/assemble/assemble/wiki/Gruntfile
[tasks]: https://github.com/assemble/assemble/wiki/Task-and-Targets
[options]: https://github.com/assemble/assemble/wiki/Options
[templates]: https://github.com/assemble/assemble/wiki/Templates
[layouts]: https://github.com/assemble/assemble/wiki/Layouts
[pages]: https://github.com/assemble/assemble/wiki/Pages
[partials]: https://github.com/assemble/assemble/wiki/Partials
[content]: https://github.com/assemble/assemble/wiki/Content
[data]: https://github.com/assemble/assemble/wiki/Data
[yaml]: https://github.com/assemble/assemble/wiki/YAML-front-matter
[markdown]: https://github.com/assemble/assemble/wiki/Markdown
[helpers]: https://github.com/assemble/assemble/wiki/Helpers
[assets]: https://github.com/assemble/assemble/wiki/Assets
[collections]: https://github.com/assemble/assemble/wiki/Collections
[examples]: https://github.com/assemble/assemble-examples
[exampleReadme]: https://github.com/assemble/assemble-examples-readme
[exampleBasic]: https://github.com/assemble/assemble-examples-basic
[exampleAdvanced]: https://github.com/assemble/assemble-examples-advanced
[exampleGrid]: https://github.com/assemble/assemble-examples-grid
[exampleTable]: https://github.com/assemble/assemble-examples-table
[exampleForm]: https://github.com/assemble/assemble-examples-form
[exampleSite]: https://github.com/assemble/assemble-examples-site
[exampleSitemap]: https://github.com/assemble/assemble-examples-sitemap
[contribute]: https://github.com/assemble/assemble/wiki/Contributing-to-Assemble
[extend]: https://github.com/assemble/assemble/wiki/Extending-Assemble
[helpers-lib]: https://github.com/assemble/assemble/wiki/Helpers
[grunt]: http://gruntjs.com/
[upgrading]: http://gruntjs.com/upgrading-from-0.3-to-0.4
[getting-started]: http://gruntjs.com/getting-started
[package]: https://npmjs.org/doc/json.html
[assemble]: https://github.com/assemble/assemble
[pre]: https://github.com/assemble/pre
[dry]: https://github.com/assemble/dry
[assemble-github-com]: https://github.com/assemble/assemble.github.com
[assemble-examples-bootstrap]: https://github.com/assemble/assemble-examples-bootstrap
[assemble-internal]: https://github.com/assemble/assemble-internal
[assemble-less]: https://github.com/assemble/assemble-less
[assemble-examples-readme]: https://github.com/assemble/assemble-examples-readme
[grunt-toc]: https://github.com/assemble/grunt-toc
[helper-lib]: https://github.com/assemble/helper-lib
[grunt-dry]: https://github.com/assemble/grunt-dry
[assemble-examples]: https://github.com/assemble/assemble-examples