Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit f0c8428e5400d98b51364d4cd81c0df272dcab68 @jonschlinkert jonschlinkert committed Sep 24, 2013
Showing with 7,529 additions and 0 deletions.
  1. +3 −0 .bowerrc
  2. +9 −0 .gitattributes
  3. +13 −0 .gitignore
  4. +13 −0 .jshintrc
  5. +6 −0 .travis.yml
  6. +58 −0 CONTRIBUTING.md
  7. +104 −0 Gruntfile.js
  8. +22 −0 LICENSE-MIT
  9. +78 −0 README.md
  10. +6 −0 bower.json
  11. +116 −0 content/Combining-960grid-with-LESS.js.md
  12. +41 −0 content/Converting-LESS-to-CSS.md
  13. +21 −0 content/Developing-less.js.md
  14. +50 −0 content/Editors-and-Plugins.md
  15. +25 −0 content/FAQ.md
  16. +13 −0 content/Frameworks-using-LESS.md
  17. +105 −0 content/GUI-compilers-that-use-LESS.js.md
  18. +30 −0 content/Getting-started.md
  19. +79 −0 content/Home.md
  20. +42 −0 content/Include-Data-URI-Base64-encoded-images-easily.md
  21. +49 −0 content/Installing-LESS.md
  22. +14 −0 content/LESS-project-and-community.md
  23. +207 −0 content/Overview.md
  24. +25 −0 content/Parent-Selectors.md
  25. +16 −0 content/Ports-of-LESS.md
  26. +174 −0 content/Release-History.md
  27. +8 −0 content/Tools.md
  28. +52 −0 content/Usage-Command-line.md
  29. +140 −0 content/Usage-clientside.md
  30. +6 −0 content/about.md
  31. +150 −0 content/compiling-less-to-css.md
  32. +1,031 −0 content/doc.md
  33. +21 −0 content/examples/example.md
  34. +68 −0 content/features.md
  35. +179 −0 content/features/extend.md
  36. +1,897 −0 content/features/function-reference.md
  37. +41 −0 content/features/functions.md
  38. +82 −0 content/features/import-directives.md
  39. +172 −0 content/features/less-extends.md
  40. +14 −0 content/features/merge.md
  41. +36 −0 content/features/mixins-implicit.md
  42. +1 −0 content/features/mixins-parametric.md
  43. +12 −0 content/features/strictmath.md
  44. +195 −0 content/features/variables.md
  45. +86 −0 content/inheritance-order.md
  46. +73 −0 content/scope.md
  47. +177 −0 content/synopsis.md
  48. +88 −0 content/usage-serverside.md
  49. +105 −0 data/CHANGELOG.yml
  50. +2 −0 data/site.yml
  51. +42 −0 package.json
  52. BIN stock/logo-med.png
  53. BIN stock/logo-mini.png
  54. BIN stock/logo-small.png
  55. +63 −0 styles/bootstrap.less
  56. +9 −0 styles/docs.less
  57. +584 −0 styles/mixins.less
  58. +37 −0 styles/overrides.less
  59. +588 −0 styles/variables.less
  60. +7 −0 templates/cheatsheet.hbs
  61. +30 −0 templates/includes/btn-tweet.hbs
  62. +13 −0 templates/includes/javascripts-footer.hbs
  63. +21 −0 templates/includes/navbar.hbs
  64. +7 −0 templates/includes/snippets/alexa.hbs
  65. +6 −0 templates/includes/subhead.hbs
  66. +115 −0 templates/index.hbs
  67. +28 −0 templates/layouts/default.hbs
  68. +24 −0 templates/layouts/layout-old.hbs
3 .bowerrc
@@ -0,0 +1,3 @@
+{
+ "directory": "vendor"
+}
9 .gitattributes
@@ -0,0 +1,9 @@
+# Set default behaviour, in case users don't have core.autocrlf set.
+*.* text=lf
+*.* text eol=lf
+*.* eol=lf
+
+*.jpg binary
+*.gif binary
+*.png binary
+*.jpeg binary
13 .gitignore
@@ -0,0 +1,13 @@
+# live site
+_gh_pages
+
+# node.js
+node_modules
+npm-debug.log
+
+# local dev
+tmp
+temp
+vendor
+TODO.md
+*.sublime-*
13 .jshintrc
@@ -0,0 +1,13 @@
+{
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "sub": true,
+ "undef": true,
+ "boss": true,
+ "eqnull": true,
+ "node": true
+}
6 .travis.yml
@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+ - "0.8"
+before_script:
+ - npm install -g grunt-cli
+ - npm install grunt
58 CONTRIBUTING.md
@@ -0,0 +1,58 @@
+## Contributing to the Wiki
+
+**Formatting Standards**
+
+For consistency across all examples in the wiki, and to ensure that our code examples are readable, we ask that you please follow these guidelines when contributing to the wiki:
+
+* Four spaces for indentation, and always use proper indentation
+* Multiple-line formatting (one property and value per line)
+* Double quotes only, never single quotes
+* Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
+* End all lines with a semi-colon
+* For multiple, comma-separated selectors, place each selector on it's own line
+* Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes. This is important to do in your own code as well, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
+* When HTML is in your examples, use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags with no trailing slash)
+* All page files should have globally unique names regardless of where they are located in the repository.
+
+
+## Tools
+
+### Assemble
+
+* Visit [Assemble's documentation](http://assemble.io/docs/) site to learn more about customization and configuration.
+* Markdown: [Markdown Cheatsheet](http://assemble.io/docs/Cheatsheet-Markdown.html)
+
+
+## Coding Style
+
+Examples:
+
+**Good**
+
+```css
+body {
+ padding-top: 80px;
+ font-size: 12px;
+}
+```
+
+**Bad**
+
+```css
+body {
+padding-top: 80px;
+font-size: 12px;
+}
+```
+
+**Bad**
+
+```css
+body { padding-top: 80px; font-size: 12px }
+```
+
+### Feature Requests, Bugs and Pull Requests
+
+* If you would like to request a feature, suggest an improvement, or report a bug, please [submit an Issue](https://github.com/cloudhead/less.js/issues?state=open).
+* Feature requests are more likely to get attention if you include a clearly described use case.
+* If you wish to submit a pull request, please [read this first](https://github.com/cloudhead/less.js/blob/master/CONTRIBUTING).md.
104 Gruntfile.js
@@ -0,0 +1,104 @@
+/*
+ * lesscss.org
+ * https://github.com/less/less-docs
+ * Copyright (c) 2013
+ * Licensed under the MIT license.
+ */
+
+'use strict';
+
+module.exports = function(grunt) {
+
+ // Project configuration.
+ grunt.initConfig({
+
+ // Project metadata
+ site: grunt.file.readYAML('data/site.yml'),
+ pkg: grunt.file.readJSON('package.json'),
+
+ // Lint JavaScript
+ jshint: {
+ options: {
+ jshintrc: '.jshintrc'
+ },
+ all: [
+ 'Gruntfile.js',
+ 'helpers/*.js'
+ ]
+ },
+
+ // Build HTML from templates and data
+ assemble: {
+ options: {
+ flatten: true,
+ assets: 'assets',
+ partials: ['templates/includes/*.hbs'],
+ helpers: ['helper-prettify'],
+ layout: 'templates/layouts/default.hbs',
+ data: ['data/*.{json,yml}', 'package.json']
+ },
+ pages: {
+ src: 'templates/*.hbs',
+ dest: '<%= site.destination %>/'
+ }
+ },
+
+ // Compile LESS to CSS
+ less: {
+ options: {
+ paths: ['vendor/bootstrap/less', 'styles'],
+ imports: {
+ reference: ['mixins.less', 'variables.less']
+ }
+ },
+ bootstrap: {
+ src: ['styles/bootstrap.less', 'styles/docs.less'],
+ dest: '<%= assemble.options.assets %>/css/docs.css'
+ }
+ },
+
+ // Before generating any new files clear out any previously-created files.
+ clean: {
+ example: ['<%= site.destination %>/*.html']
+ },
+
+ watch: {
+ all: {
+ files: ['<%= jshint.all %>'],
+ tasks: ['jshint', 'nodeunit']
+ },
+ design: {
+ files: ['Gruntfile.js', '<%= less.options.paths %>/*.less', '**/*.hbs'],
+ tasks: ['design']
+ }
+ }
+ });
+
+ // Load npm plugins to provide necessary tasks.
+ grunt.loadNpmTasks('assemble');
+ grunt.loadNpmTasks('assemble-less');
+ grunt.loadNpmTasks('grunt-recess');
+ grunt.loadNpmTasks('grunt-contrib-clean');
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-watch');
+
+ // Default tasks to be run.
+ grunt.registerTask('default', [
+ 'clean',
+ 'jshint',
+ 'assemble',
+ 'prettify',
+ 'less'
+ ]);
+
+ // Build HTML, compile LESS and watch for changes.
+ // You must first run "bower install" or install
+ // Bootstrap to the "vendor" directory before running
+ // this command.
+ grunt.registerTask('design', [
+ 'clean',
+ 'assemble',
+ 'less:docs',
+ 'watch:design'
+ ]);
+};
22 LICENSE-MIT
@@ -0,0 +1,22 @@
+Copyright (c) 2013 Jon Schlinkert
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
78 README.md
@@ -0,0 +1,78 @@
+# lesscss.org
+
+> Official website and documentation for LESS/Less.js
+
+### [Visit the website](http://lesscss.org)
+
+### [Visit Less.js](https://less/less.js)
+
+
+## Libs
+
+The documentation site is generated using [Assemble](http://assemble.io) and [Grunt.js](http://gruntjs.com). Please visit those respective projects to learn more about usage and customization.
+
+## Todo
+
+* Add grunt-github-api to sync changelog from main site
+* Add grunt-readme
+
+
+## Contributing
+
+**Formatting Standards**
+
+For _consistency and readability_ across all examples in the documentation, we ask that you please conform these guidelines when contributing:
+
+* Two spaces for indentation, never tabs, and always use proper indentation
+* Multiple-line formatting (one property and value per line)
+* For multiple, comma-separated selectors, place each selector on it's own line
+* Double quotes only, never single quotes
+* Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
+* End _all_ lines with a semi-colon
+* Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes. This is important to do in your own code as well, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
+* When HTML is in your examples, use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags with no trailing slash)
+* All page files should have globally unique names regardless of where they are located in the repository.
+
+Examples:
+
+**Good**
+
+```css
+body {
+ padding-top: 80px;
+ font-size: 12px;
+}
+```
+
+**Bad**
+
+```css
+body {
+padding-top: 80px;
+font-size: 12px;
+}
+```
+
+**Bad**
+
+```css
+body { padding-top: 80px; font-size: 12px }
+```
+
+### Feature Requests, Bugs and Pull Requests
+
+* If you would like to request a feature, suggest an improvement, or report a bug, please [submit an Issue](https://github.com/cloudhead/less.js/issues?state=open).
+* Feature requests are more likely to get attention if you include a clearly described use case.
+* If you wish to submit a pull request, please [read this first](https://github.com/cloudhead/less.js/blob/master/CONTRIBUTING).md.
+
+## Tools
+
+### Assemble
+
+* Visit [Assemble's documentation](http://assemble.io/docs/) site to learn more about customization and configuration.
+* Markdown: [Markdown Cheatsheet](http://assemble.io/docs/Cheatsheet-Markdown.html)
+* Handlebars
+
+
+## Release History
+_(Nothing yet)_
6 bower.json
@@ -0,0 +1,6 @@
+{
+ "name": "lesscss.org",
+ "dependencies": {
+ "bootstrap": "~3.0.0-rc1"
+ }
+}
116 content/Combining-960grid-with-LESS.js.md
@@ -0,0 +1,116 @@
+{{#todo}}
+Refactor this or get rid of it. It's not really related to LESS proper, it's more suitable for a tutorial or blog post.
+{{/todo}}
+
+Using LESS.js can maximize the potential of CSS grid frameworks like 960grid, Blue Print, and OOCSS.
+
+##960grid in LESS.js
+
+The following is 960grid framework rewritten as LESS.js:
+
+```less
+// Grid Constants
+// ============================
+@gridMargin : 10px;
+@totalMargin : @gridMargin * 2;
+@colWidth : 40px;
+@gridWidth : 960px;
+
+/* Containers */
+.container_24 {
+ margin-left: auto;
+ margin-right: auto;
+ width: @gridWidth;
+}
+
+/* instead of grid_1, grid_2, etc. */
+.grid960 (@gridNum) {
+ width: (@colWidth * @gridNum) - @totalMargin;
+ display:inline;
+ float: left;
+ position: relative;
+ margin-left: @gridMargin;
+ margin-right: @gridMargin;
+}
+
+/* instead of prefix_1, prefix_2, etc. */
+.prefix960 (@gridNum) {
+ padding-left:@colWidth * @gridNum;
+}
+
+/* instead of suffix_1, suffix_2, etc. */
+.suffix960 (@gridNum) {
+ padding-right: @colWidth * @gridNum;
+}
+
+/* instead of push_1, push_2, etc. */
+.push960 (@gridNum) {
+ left: (@colWidth * @gridNum);
+}
+
+/* instead of pull_1, pull_2, etc. */
+.pull960 (@gridNum) {
+ @thisCol : @colWidth * @gridNum;
+ left : ( (@thisCol) - ( (@thisCol) * 2) );
+}
+
+.alpha {
+ margin-left: 0;
+}
+
+.omega {
+ margin-right: 0;
+}
+/* http://sonspring.com/journal/clearing-floats */
+.clear {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+.clearfix {
+ display: inline-block;
+ *display : inline;
+ zoom : 1;
+ &:after {
+ clear: both;
+ content: ' ';
+ display: block;
+ font-size: 0;
+ line-height: 0;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+ }
+}
+```
+## Applying grid styling to elements
+Applying the styling to HTML elements is simple.
+
+```css
+
+#Wrapper {
+ .container_24;
+ .clearfix;
+}
+
+#Page {
+ .grid960(19);
+ .push960(5);
+}
+
+#Sidebar{
+ .grid960(5);
+ .pull960(19);
+}
+#Footer {
+ .container_24;
+ //create 6 equal columns
+ > .section {
+ .grid960(4);
+ .alpha;
+ }
+}
+```
41 content/Converting-LESS-to-CSS.md
@@ -0,0 +1,41 @@
+## Node.js compilers
+* **[assemble-less](https://github.com/assemble/assemble-less)**: Full-featured Grunt.js plugin for compiling LESS files to CSS, with additional options for maintaining libraries of LESS components and themes. For advanced users, this plugin allows you to define and manage LESS "packages" or "bundles" using JSON, [Lo-dash](https://github.com/bestiejs/lodash)(underscore) templates (e.g. `<%= bootstrap.less %>`), and [node-glob](https://github.com/isaacs/node-glob) / [minimatch](https://github.com/isaacs/minimatch) (e.g. `'../src/**/*.less"`). _assemble-less_ also has a number of options including minifying CSS
+* **[RECESS](https://github.com/twitter/recess)**: Twitter's code quality tool for CSS built on top of LESS. RECESS has options for compiling LESS to CSS, as well as linting, formatting and minifying CSS.
+* **[autoless](https://github.com/jgonera/autoless)**: A LESS files watcher, with dependency tracking (changes to imported files cause other files to be updated too) and growl notifications.
+* **[Connect Middleware for LESS.js](https://github.com/emberfeather/less.js-middleware)**: Connect Middleware for LESS.js compiling
+
+## Other technologies
+
+### Java
+**Wro4j Runner CLI**
+Download the [wro4j-runner.jar](http://wro4j.googlecode.com/files/wro4j-runner-1.4.1-jar-with-dependencies.jar) file and run the following command:
+``` bash
+java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss`
+```
+More details can be found here: [Wro4j Runner CLI](http://code.google.com/p/wro4j/wiki/wro4jRunner)
+
+### Perl
+**CSS::LESSp**
+http://search.cpan.org/~drinchev/CSS-LESSp/
+``` bash
+lessp.pl styles.less > styles.css
+```
+
+### Windows
+**Windows Script Host**
+[LESS.js for Windows](https://github.com/duncansmart/less.js-windows) with this usage:
+
+``` bash
+cscript //nologo lessc.wsf input.less [output.css] [-compress]
+```
+or
+``` bash
+lessc input.less [output.css] [-compress]
+```
+
+**dotless**
+[dotless for Windows](http://www.dotlesscss.org/) can be run like this:
+
+``` bash
+dotless.Compiler.exe [-switches] <inputfile> [outputfile]
+```
21 content/Developing-less.js.md
@@ -0,0 +1,21 @@
+## Install these tools
+
+* cygwin (ensure make is selected) - http://cygwin.com/install.html
+* node - http://nodejs.org/
+* phantomjs - http://phantomjs.org/download.html
+
+make sure the paths are setup. If you startup cygwin and type `node -v` you should see the node compiler. If you run `phantomjs -v` you should see the phantomjs version number.
+
+* clone your less.js repository locally
+* navigate to your local less.js repository and run `npm install` this installs less' npm dependencies.
+* run `npm -g install uglify-js` if you want to do builds. This needs to be done so that uglify-js is available globally.
+
+## usage
+
+If you go to the root of the less repository you should be able to do `make test` - this should run the tests. `make browser-test` should run the browser tests. If you want to try out the currrent version of less against a file, from here do `node bin/lessc path/to/file.less`
+
+To debug the browser tests, run `make browser-test-server` then go to http://localhost:8081/browser/test-runner-main.htm or one of the other test runner pages created in `{path-to-less.js-repository}/test/browser/`
+
+Optional: To get the current version of the less compiler do `npm -g install less` - npm is the node package manager and "-g" installs it to be available globally.
+
+You should now be able to do `lessc file.less` and if there is an appropriate file.less then it will be compiled and output in the current directory.
50 content/Editors-and-Plugins.md
@@ -0,0 +1,50 @@
+Also see: [[GUI Compilers that use LESS.js]]
+
+## Text Editors
+
+* [Crunch!](http://crunchapp.net/): The LESS editor and compiler that almost makes it too easy.
+* [Mindscape Web Workbench][web-workbench] (built-in support) "Accelerate and simplify your Web development experience with Visual Studio integrated Sass, Less and CoffeeScript support"
+* [NetBeans](http://bits.netbeans.org/download/trunk/nightly/latest) (currently available in latest dev version only, planed for 7.4)
+* [TextMate](https://github.com/appden/less.tmbundle)
+* [Vim](https://github.com/groenewege/vim-less)
+* [jetBrains](http://www.jetbrains.com/phpstorm/) (built in support)
+
+
+#### [Sublime Text 2 & 3](http://sublimetext.com/)
+* [LESS-sublime][LESS-sublime]
+* [Sublime-LESS-to-CSS][Sublime-LESS-to-CSS]
+* [LESS-build-sublime][LESS-build-sublime]
+* [SublimeOnSaveBuild][SublimeOnSaveBuild]
+
+#### Eclipse
+* [Plugin](http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html) by Vincent Simonet
+
+
+#### Visual Studio
+* [CSS Is Less][CSSisLESS] (Visual Studio)
+* [Web Essentials][webessentials] (Visual Studio 2012)
+
+
+#### Dreamweaver
+* [DMXzone LESS CSS Compiler][dmx]
+
+#### [Notepad++ 6.x][Npp]
+* [Less.js Syntax Highlighting][Npp-Less-Salitrero] User Defined Language by Raúl Salitrero
+* [Less.js Syntax Highlighting][Npp-Less-azrafe7] User Defined Language by azrafe7
+* [How to Install][Npp-How-to]
+
+<!-- invisible links -->
+
+[SublimeOnSaveBuild]: https://github.com/alexnj/SublimeOnSaveBuild "Sublime Text Package for LESS.js"
+[LESS-sublime]: https://github.com/danro/LESS-sublime "Sublime Text Package for LESS.js"
+[LESS-build-sublime]: https://github.com/berfarah/LESS-build-sublime "Sublime Text Package for LESS.js"
+[Sublime-LESS-to-CSS]: https://github.com/timdouglas/sublime-less2css "Sublime Text Package for LESS.js"
+[webessentials]: http://tinyurl.com/WebEssentials2012
+[CSSisLESS]: http://visualstudiogallery.msdn.microsoft.com/dd5635b0-3c70-484f-abcb-cbdcabaa9923
+[netbeans]: http://plugins.netbeans.org/plugin/32782/lesscss-module "NetBeans"
+[web-workbench]: http://visualstudiogallery.msdn.microsoft.com/2b96d16a-c986-4501-8f97-8008f9db141a
+[dmx]: http://www.dmxzone.com/go/21514/dmxzone-less-css-compiler-features-unveiled/
+[Npp]: http://notepad-plus-plus.org/ "v6.3+ recommended"
+[Npp-Less-Salitrero]: http://sourceforge.net/apps/mediawiki/notepad-plus/?title=User_Defined_Language_Files#L
+[Npp-Less-azrafe7]: https://github.com/azrafe7/LESS-for-Notepad-plusplus "improved and with a dark theme"
+[Npp-How-to]: http://sourceforge.net/apps/mediawiki/notepad-plus/?title=User_Defined_Language_Files#How_to_install_user_defined_language_files "how to install User Defined Language files"
25 content/FAQ.md
@@ -0,0 +1,25 @@
+## How do I install LESS?
+For general installation instructions, please read the [[Getting Started]] guide. If you need more specific information after having read that, read the comprehensive [[Installing LESS]] guide.
+
+
+<a name="faq-windows"></a>
+## Use LESS on Windows
+LESS works fine on Windows, because [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) both work fine on Windows. Usually the problematic part is [Cygwin](http://www.cygwin.com/), because it bundles an outdated version of Node.js.
+
+The best way to avoid this issue is to use the [msysGit installer](http://msysgit.github.com/) to install the `git` binary and the [Node.js installer](http://nodejs.org/#download) to install the `node` and `npm` binaries, and to use the built-in [Windows command prompt](http://www.cs.princeton.edu/courses/archive/spr05/cos126/cmd-prompt.html) or [PowerShell](http://support.microsoft.com/kb/968929) instead of Cygwin.
+
+
+<a name="faq-async-complete"></a>
+## Why doesn't my asynchronous task complete?
+Chances are this is happening because you have forgotten to call the [this.async](LESS.task#wiki-this-async) method to tell LESS that your task is asynchronous. For simplicity's sake, LESS uses a synchronous coding style, which can be switched to asynchronous by calling `this.async()` within the task body.
+
+Note that passing `false` to the `done()` function tells LESS that the task has failed.
+
+For example:
+
+```javascript
+LESS.registerTask('asyncme', 'My asynchronous task.', function() {
+ var done = this.async();
+ doSomethingAsync(done);
+});
+```
13 content/Frameworks-using-LESS.md
@@ -0,0 +1,13 @@
+# Frameworks that use LESS.js
+
+ * [Bootstrap, from Twitter](http://twitter.github.com/bootstrap/)
+* [Pre: An enjoyable CSS framework use LESS](https://github.com/yuanyan/pre)
+ * [Flaw{LESS} CSS Framework](http://github.com/DominikGuzei/flawless.css)
+ * [Centage!](http://centage.peruste.net)
+ * [More Less](https://github.com/pailoro/Moreless)
+ * [Perkins](http://p.erkins.com/)
+ * [Golden Grid System](https://github.com/jonikorpi/Golden-Grid-System)
+ * [Ruby Less](https://github.com/cowboyd/less.rb)
+ * [Less In Rails Asset Pipeline](https://github.com/metaskills/less-rails)
+ * [Foundation (Branch:Less)](https://github.com/zurb/foundation/tree/less)
+ * [Graphite, for ASP.NET platform](http://graphite.estate.nl/)
105 content/GUI-compilers-that-use-LESS.js.md
@@ -0,0 +1,105 @@
+<span class="warning">**Tip**: try out the different LESS tools available for your platform, to see which one fits you best.</span>
+
+_This page focuses on GUI compilers. For command line usage and tools see [[Command Line Usage]]._
+
+
+## Cross platform
+
+### [Crunch!](http://crunchapp.net/)
+
+> Crunch is not just a LESS compiler, it is also a LESS editor for Windows and Mac.
+
+If you work a lot with LESS files, you should definitely try it out. Crunch is built on the Adobe AIR platform. Get more info: [http://crunchapp.net/](http://crunchapp.net/).
+
+![Crunch screenshot](http://crunchapp.net/img/Crunch.png)
+
+
+### [Mixture](http://mixture.io/)
+
+> A rapid prototyping and static site generation tool for designers and developers
+
+Mixture brings together a collection of awesome tools and best practices. It's quick, no-fuss, super-powerful and works with your favourite editor.
+
+Get more info: [http://mixture.io/](http://mixture.io)
+
+![mixture screenshot](https://s3.amazonaws.com/mixture-mixed/1/775/assets/img/img1.jpg)
+
+
+### [SimpLESS](http://wearekiss.com/simpless)
+
+> SimpLESS is a minimalistic LESS compiler. Just drag, drop and compile.
+
+One of the unique features of SimpLESS is that it supports 'prefixing' your CSS by using [http://prefixr.com.](http://prefixr.com). SimpLESS is built on the Titanium platform. Get more info: [http://wearekiss.com/simpless](http://wearekiss.com/simpless)
+
+![SimpLESS screenshot](http://wearekiss.com/lib/img/simpless/app-windows.png?1)
+
+
+### [Koala](http://koala-app.com/)
+
+> Koala is a cross-platform GUI application for compiling less, sass and coffeescript.
+
+Features: cross platform, compile error notification supports and compile options supports.
+
+Get more info: [http://koala-app.com/](http://koala-app.com/)
+
+![koala screenshot](http://koala-app.com/images/screenshots/windows.png)
+
+
+
+
+## Specific platforms
+
+### Windows
+
+#### [Prepros App](http://alphapixels.com/prepros)
+>Prepros is a free and open source app that can compile less, sass, stylus, jade, haml and much more with live browser refresh.
+
+Get more info at [http://alphapixels.com/prepros](http://alphapixels.com/prepros)
+
+![Prepros screenshot](http://alphapixels.com/prepros/img/prepros.jpg)
+
+#### [WinLess](http://winless.org)
+
+> WinLess started out as a clone of LESS.app, it takes a more feature-complete approach and has several settings. It also supports starting with command line arguments.
+
+Get more info: [http://winless.org](http://winless.org)
+
+![WinLess screenshot](http://files.web-mark.nl/winless/style/images/WinLess_Screenshot.png)
+
+
+### OSx
+
+#### [LESS.app](http://incident57.com/less)
+
+> LESS.app was the first GUI compiler for LESS. LESS.app has a 'Compiler' tab where you can see the compiler results.
+
+Get more info: [http://incident57.com/less](http://incident57.com/less)
+
+![LESS.app screenshot](http://incident57.com/less/images/hero-window.png)
+
+#### [CodeKit](http://incident57.com/codekit)
+
+> CodeKit is the sucessor to LESS.app, and supports LESS among many other preprocessing languages, such as SASS, Jade, Markdown, and many more.
+
+Get more info: [http://incident57.com/codekit](http://incident57.com/codekit)
+
+![CodeKit screenshot](http://incident57.com/codekit/images/hero-window.png)
+
+#### [LiveReload](http://livereload.com)
+
+> CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work.
+
+Get more info: [http://livereload.com](http://livereload.com)
+
+![LiveReload screenshot](http://assets.livereload.com/embedded-images/LiveReload-LESS-screenshot-on-white.png)
+
+### Linux
+
+#### [Plessc](https://github.com/Mte90/Plessc)
+
+> Plessc is a gui fronted made with PyQT.
+
+Auto compile, log viewer, open the less file with the editor choosen, settings for compile the file.
+Get more info: [https://github.com/Mte90/Plessc](https://github.com/Mte90/Plessc)
+
+![Plessc screenshot](https://github.com/Mte90/Plessc/raw/master/screenshot.png)
30 content/Getting-started.md
@@ -0,0 +1,30 @@
+> There are many options for compiling LESS to CSS, using the command line or GUI tools
+
+### Command Line
+
+To compile LESS to CSS using the command line, start by installing Less.js with the [Node Package Manager](http://nodejs.org/download/):
+
+``` bash
+npm install -g less
+```
+And then:
+``` bash
+lessc styles.less styles.css
+```
+
+### node.js tools
+There are a number of 3rd-party tools available for compiling LESS to CSS, including:
+* **[assemble-less](https://github.com/assemble/assemble-less)**: Full-featured, configurable Grunt.js plugin for compiling LESS and LESS "bundles" to CSS.
+* **[RECESS](https://github.com/twitter/recess)**: Twitter's code quality tool for CSS built on top of LESS.
+* **[autoless](https://github.com/jgonera/autoless)**: A LESS files watcher, with dependency tracking and growl notifications.
+
+**[[More information|Converting-LESS-to-CSS]]** about node.js compilers.
+
+### GUI tools
+TODO: add a summary of GUI tools
+
+
+### Related Information
+
+* [[Command Line Usage]]
+* [[Converting LESS to CSS]]
79 content/Home.md
@@ -0,0 +1,79 @@
+# Welcome to the Less.js wiki!
+
+> Documentation for Less.js, the official compiler for the LESS language
+
+**About LESS**
+
+As an extension to CSS, LESS is not only backwards compatible with CSS, but LESS uses _existing CSS syntax_ for the extra features it adds. This makes learning LESS a _breeze_, and allows you to you fall back to CSS if in doubt.
+
+<span class="warning">For more information about the language and features visit [lesscss.org][website]</span>
+
+
+### Getting Started
+* About
+
+**External Resources**
+* Example LESS Projects
+* [StackOverflow: Questions tagged with "LESS"][stackoverflow]
+* [Sitepoint, "A Comprehensive Introduction to LESS"][sitepoint-article]
+* [Net Tuts+, "Quick Tip: You Need to Check out LESS.js"][nettuts]
+* [Hongkiat.com, "LESS CSS Tutorial: Designing a Slick Navigation Bar"][hongkiatNavbar]
+* [Hongkiat.com, "Working Effectively With LESS: Tips And Tools"][hongkiatEffective]
+
+
+## Usage
+
+### Usage and compiling
+
+* Client Side Usage
+* Converting LESS to CSS
+* Command Line Usage
+* Command Line Options|Options
+* Browser Options
+
+**GUI tools**
+* GUI compilers that use LESS.js
+* Editors and Plugins
+
+
+### General information
+* Function Reference
+* Include Data URI Base64 encoded images easily
+* Frameworks that use LESS.js
+* Combining 960grid with LESS.js
+
+
+### Language Features
+
+* Variables TODO
+* Mixins TODO
+* Extends TODO
+* Pattern Matching TODO
+* Nested Rules TODO
+* Operations TODO
+* Functions|Function-Reference
+* Namespaces TODO
+* Scope TODO
+* Comments TODO
+* Importing TODO
+
+
+## Developer information
+* Roadmap
+* [Contributing][contributing]
+* Developing Less.js
+* Other ports of LESS|Ports of LESS
+
+
+<!-- referenced links, these stay invisible unless in edit mode. Try to use these inside the content instead of full paths. -->
+
+[website]: http://lesscss.org/ "Less.js Official Website"
+[contributing]: https://github.com/cloudhead/less.js/blob/master/CONTRIBUTING.md "Contributing to Less.js"
+[issues]: https://github.com/cloudhead/less.js/issues?state=open "Visit GitHub Issues for Less.js"
+
+[nettuts]: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/ "Quick Tip: You Need to Check out LESS.js"
+[sitepoint-article]: http://www.sitepoint.com/a-comprehensive-introduction-to-less/ "Introduction to LESS"
+[stackoverflow]: http://stackoverflow.com/questions/tagged/less "Questions tagged with 'LESS'"
+
+[hongkiatNavbar]: http://www.hongkiat.com/blog/less-css-tutorial-design-slick-menu-nav-bar/
+[hongkiatEffective]: http://www.hongkiat.com/blog/less-tips-tools/
42 content/Include-Data-URI-Base64-encoded-images-easily.md
@@ -0,0 +1,42 @@
+Here's a little bash script that converts a folder full of PNGs to a .less file, designed to be included in a "main" .less file, referencing all images encoded as base64 data URIs, along with their sizes.
+
+ #!/bin/bash
+
+ SRC="$1"
+ DST="$2"
+ TMP="$(mktemp)"
+
+ find "$SRC" -name "*.png" | while read i; do
+ j="$(basename "$i")"
+ f="$(echo "${j%.png}" | tr "@#&%+-. " "_")"
+ echo "@gfx_$f: \"data:$(file -b --mime-type "$i");base64,$(base64 -w0 "$i")\";"
+ echo "@size_$f: $(gm identify -format "%wpx %hpx" "$i" 2>/dev/null);"
+ done > "$TMP";
+ mv "$TMP" "$DST"
+
+You may need to change paths/params to `mktemp`, `file`, `base64` and `gm` [GraphicsMagick] according to your setup.
+
+Say you have UITableNextButton.png and UITableNextButton@2x.png in your source folder, the script produces this result (base64 data cut to save space) :
+
+ @gfx_UITableNextButton: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAfCAYAAAA(...)";
+ @size_UITableNextButton: 29px 31px;
+ @gfx_UITableNextButton_2x: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA+CAYA(...)";
+ @size_UITableNextButton_2x: 58px 62px;
+
+This allows you to create a .less file like this:
+
+ @import "gfx.less" //file produced by the script
+ .UITableNextButton {
+ background: url(@gfx_UITableNextButton) no-repeat center center;
+ -webkit-background-size: @size_UITableNextButton;
+ }
+
+ @media only screen and (-webkit-min-device-pixel-ratio: 2) {
+ .UITableNextButton {
+ background-image: url(@gfx_UITableNextButton_2x);
+ }
+ }
+
+That speeds things a lot and keeps your code nice, clean, and readable.
+
+You can put lots of .png files in your source folder, the final compilation of your .less file will only include the assets needed and drop the ones unused.
49 content/Installing-LESS.md
@@ -0,0 +1,49 @@
+# Installing Less.js
+
+For general installation instructions, please read the [[Getting Started]] guide. If you need more specific information after having read that, read on.
+
+
+
+## Overview
+Less.js is comprised of two parts: `lessc`.
+
+1. The npm module `lessc` should be installed locally to your project. It contains the code and logic for running tasks, loading plugins, etc.
+1. The npm module `lessc-cli` should be installed globally. It puts the `lessc` command in your PATH so you can execute it anywhere. By itself, it doesn't do anything; its job is to load and run the lessc that has been installed locally to your project, regardless of its version.
+
+It is preferable to specify lessc and lessc plugins as [devDependencies](https://npmjs.org/doc/json.html#devDependencies) in your project's [package.json](https://npmjs.org/doc/json.html) and instruct users to do `npm install` than to have users install lessc and lessc plugins manually. Utilizing `package.json` makes the task of installing lessc (and any other dev dependencies) much easier and less error-prone.
+
+## Installing lessc
+As the "Installing lessc and lessc plugins" section of the [[Getting Started]] guide explains, run `npm install lessc --save-dev` and npm will install the latest official version of lessc in your project folder, adding it to your `package.json` devDependencies.
+
+Note that a [tilde version range][] will be automatically specified in `package.json`. This is good, as new patch releases of the latest version will be installable by npm.
+
+[tilde version range]: https://npmjs.org/doc/json.html#Tilde-Version-Ranges
+
+### Installing a specific version of lessc
+If you need a specific version of lessc, run `npm install lessc@VERSION --save-dev` where `VERSION` is the version you need, and npm will install that version of lessc in your project folder, adding it to your `package.json` devDependencies.
+
+Note that a [tilde version range][] will be automatically specified in `package.json`. This is typically good, as new patch releases of the specified version will be installable by npm. If you don't want this behavior, manually edit your `package.json` and remove the ~ (tilde) from the version number. This will lock in the exact version that you have specified.
+
+### Installing a published development version of lessc
+Periodically, as new functionality is being developed, lessc builds will be published to npm. These builds will _not_ be published as a `@latest` official release, and will typically have a build number or alpha/beta/release candidate designation.
+
+Like installing a specific version of lessc, run `npm install lessc@VERSION --save-dev` where `VERSION` is the version you need, and npm will install that version of lessc in your project folder, adding it to your `package.json` devDependencies.
+
+Note that regardless of the version you specify, a [tilde version range][] will be specified in `package.json`. **This is very bad**, as new, possibly incompatible, patch releases of the specified development version may be installed by npm, breaking your build.
+
+_In this case it is **very important** that you manually edit your `package.json` and remove the ~ (tilde) from the version number. This will lock in the exact development version that you have specified._
+
+### Installing an unpublished development version of lessc
+If you want to install a bleeding-edge, unpublished version of lessc, follow the instructions for specifying a [git URL as a dependency](https://npmjs.org/doc/json.html#Git-URLs-as-Dependencies) and be sure to specify an actual commit SHA (not a branch name) as the `commit-ish`. This will guarantee that your project always uses that exact version of lessc.
+
+The specified git URL may be that of the official lessc repo or a fork.
+
+## Installing lessc-cli
+As the "Installing the CLI" section of the [[Getting Started]] guide explains, run `npm install -g lessc-cli` and npm will install the latest official version of lessc-cli. This will put the `lessc` command in your system path, allowing it to be run from any directory.
+
+**If you have installed lessc globally in the past, you will need to remove it with `npm uninstall -g lessc` first.**
+
+### Installing lessc-cli locally
+You may install lessc-cli locally to a project using `npm install lessc-cli --save-dev` but instead of being able to access the `lessc` command from anywhere, you'll need to specify its explicit local path, which will be something like `./node_modules/.bin/lessc`.
+
+Using lessc-cli in this way is unsupported.
14 content/LESS-project-and-community.md
@@ -0,0 +1,14 @@
+## Community and Contributions
+
+
+
+
+
+
+
+### Grid Systems
+
+ * [960 Grid|combining-960grid-with-less-js]
+
+
+### Frameworks
207 content/Overview.md
@@ -0,0 +1,207 @@
+## The Language
+
+As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning LESS a breeze, and if in doubt, lets you fall back to CSS.
+
+
+
+### Variables
+
+These are pretty self-explanatory:
+
+```less
+@nice-blue: #5B83AD;
+@light-blue: @nice-blue + #111;
+
+#header {
+ color: @light-blue;
+}
+```
+
+Outputs:
+
+```css
+#header {
+ color: #6c94be;
+}
+```
+
+Note that variables are actually "constants" in that they can only be defined once.
+
+
+### Mixins
+
+Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:
+
+```css
+.bordered {
+ border-top: dotted 1px black;
+ border-bottom: solid 2px black;
+}
+```
+
+And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:
+
+```less
+#menu a {
+ color: #111;
+ .bordered;
+}
+
+.post a {
+ color: red;
+ .bordered;
+}
+```
+
+The properties of the `.bordered` class will now appear in both `#menu a` and `.post a`. (Note that you can also use `#ids` as mixins.)
+
+
+**Learn more**
+ * [[More about mixins|mixins]]
+ * [[Parametric Mixins|parametric-mixins]]
+
+
+### Nested rules
+
+LESS gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:
+
+```css
+#header {
+ color: black;
+}
+#header .navigation {
+ font-size: 12px;
+}
+#header .logo {
+ width: 300px;
+}
+```
+
+In LESS, we can also write it this way:
+
+```less
+#header {
+ color: black;
+ .navigation {
+ font-size: 12px;
+ }
+ .logo {
+ width: 300px;
+ }
+}
+```
+
+The resulting code is more concise, and mimics the structure of your HTML.
+
+You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (`&` represents the current selector parent):
+
+```less
+.clearfix {
+ display: block;
+ zoom: 1;
+
+ &:after {
+ content: " ";
+ display: block;
+ font-size: 0;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+}
+```
+
+### Operations
+
+Any number, color or variable can be operated on. Here are a couple of examples:
+
+```less
+@base: 5%;
+@filler: @base * 2;
+@other: @base + @filler;
+
+color: #888 / 4;
+background-color: @base-color + #111;
+height: 100% / 2 + @filler;
+```
+
+The output is pretty much what you expect—LESS understands the difference between colors and units. If a unit is used in an operation, like in:
+
+```less
+@var: 1px + 5;
+```
+
+LESS will use that unit for the final output—`6px` in this case.
+
+
+### Namespaces & Accessors
+
+Sometimes, you may want to group your variables or mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in LESS—say you want to bundle some mixins and variables under `#bundle`, for later reuse or distributing:
+
+```less
+#bundle {
+ .button {
+ display: block;
+ border: 1px solid black;
+ background-color: grey;
+ &:hover {
+ background-color: white
+ }
+ }
+ .tab { ... }
+ .citation { ... }
+}
+```
+
+Now if we want to mixin the `.button` class in our `#header a`, we can do:
+
+```less
+#header a {
+ color: orange;
+ #bundle > .button;
+}
+```
+
+
+### Scope
+
+Scope in LESS is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.
+
+Note that the order of declaration **does** matter.
+
+```less
+ @var: red;
+
+ #page {
+ @var: white;
+ #header {
+ color: @var; // white
+ }
+ }
+```
+
+### Comments
+
+Both C-style and inline comments may be used:
+
+```less
+/* One hell of a comment */
+@var: red;
+
+// Get in line!
+@var: white;
+```
+
+
+### Importing
+
+Importing works pretty much as expected. You can import a `.less` file, and all the variables in it will be available. If the file is a `.less`, the extension is optional:
+
+```css
+@import "library";
+@import "typo.css";
+```
+
+LESS is a pretty concise language. :-)
+
+[website]: http://snowplowanalytics.com
25 content/Parent-Selectors.md
@@ -0,0 +1,25 @@
+When using **Nested rules**, it can be very useful to prepend a selector to the inherited (parent) scope. This feature is known as "Parent Selectors", and can be done by putting the parent selector before an ampersand `&`.
+
+For example, when using Modernizr, you might want to specify different rules based on supported features:
+
+```css
+.header {
+ .menu {
+ border-radius: 5px;
+ .no-borderradius & {
+ background-image: url('images/button-background.png');
+ }
+ }
+}
+```
+
+The selector `.no-borderradius &` will be combined with the inherited scope, `.header .menu`, to form the selector `.no-borderradius .header .menu`.
+
+```css
+.header .menu {
+ border-radius: 5px;
+}
+.no-borderradius .header .menu {
+ background-image: url('images/button-background.png');
+}
+```
16 content/Ports-of-LESS.md
@@ -0,0 +1,16 @@
+## LESS ported to or used in other languages, etc.
+
+### Java
+* [LESS Engine](https://github.com/Asual/lesscss-engine) (Runs less.js in the Rhino JVM-based JavaScript interpreter)
+* [LESS CSS Compiler for Java](https://github.com/marceloverdijk/lesscss-java) (Runs less.js in the Rhino JVM-based JavaScript interpreter)
+* [Less4j](https://github.com/SomMeri/less4j) (Native Java implementation.)
+
+### .Net
+* [LESS CSS for .Net](http://www.dotlesscss.org/)
+
+### PHP
+* [lessphp](http://leafo.net/lessphp/docs/)
+* [BW LESS CSS](http://wordpress.org/extend/plugins/bw-less-css/) (WordPress Plugin)
+
+### Ruby
+* [Less.js In Ruby's V8 Engine](https://github.com/cowboyd/less.rb)
174 content/Release-History.md
@@ -0,0 +1,174 @@
+# Release History
+
+**TODO**:
+
+* Clean up v1.4.0 changes. Sort into "breaking changes", "features" and "bugs"
+* Use assemble and grunt-github-api to build this dynamically from the official changelog
+
+---
+
+### v1.4.x-beta
+
+> Released: 2013-03-07
+
+**Breaking changes**
+* maths is now only done inside brackets - disable with strictMaths
+* units must be consistent - disable with strictUnits
+* variables from mixins do not leak into the parent scope
+* @import defaults to only importing the same file once
+
+**Features**
+TODO...
+**Bugs**
+TODO...
+
+Unsorted
+ - support for `:extend()` in selectors (e.g. `input:extend(.button) {}`) and `&:extend();` in ruleset (e.g. `input { &:extend(.button all); }`)
+ - maths is now only done inside brackets. This means font: statements, media queries and the calc function can use a simpler format without being escaped. Disable this with --strict-maths-off in lessc and strictMaths:false in JavaScript.
+ - units are calculated, e.g. 200cm+1m = 3m, 3px/1px = 3. If you use units inconsistently you will get an error. Suppress this error with --strict-units-off in lessc or strictUnits:false in JavaScript
+ - `(~"@var")` selector interpolation is removed. Use @{var} in selectors to have variable selectors
+ - default behaviour of import is to import each file once. `@import-once` has been removed.
+ - You can specify options on imports to force it to behave as css or less `@import (less) "file.css"` will process the file as less
+ - variables in mixins no longer 'leak' into their calling scope
+ - added data-uri function which will inline an image into the output css. If ieCompat option is true and file is too large, it will fallback to a url()
+ - significant bug fixes to our debug options
+ - other parameters can be used as defaults in mixins e.g. .a(@a, @b:@a)
+ - an error is shown if properties are used outside of a ruleset
+ - added extract function which picks a value out of a list, e.g. extract(12 13 14, 3) => 3
+ - added luma, hsvhue, hsvsaturation, hsvvalue functions
+ - added pow, pi, mod, tan, sin, cos, atan, asin, acos and sqrt math functions
+ - added convert function, e.g. convert(1rad, deg) => value in degrees
+ - lessc makes output directories if they don't exist
+ - lessc `@import` supports https and 301's
+ - lessc "-depends" option for lessc writes out the list of import files used in makefile format
+ - lessc "-lint" option just reports errors
+ - other bug fixes
+
+---
+
+### v1.3.3
+
+> Released: 2012-12-30
+
+ - Fix critical bug with mixin call if using multiple brackets
+ - when using the filter contrast function, the function is passed through if the first argument is not a color
+
+---
+
+### v1.3.2
+
+> Released: 2012-12-28
+
+ - browser and server url re-writing is now aligned to not re-write (previous lessc behaviour)
+ - url-rewriting can be made to re-write to be relative to the entry file using the relative-urls option (less.relativeUrls option)
+ - rootpath option can be used to add a base path to every url
+ - Support mixin argument seperator of ';' so you can pass comma seperated values. e.g. `.mixin(23px, 12px;);`
+ - Fix lots of problems with named arguments in corner cases, not behaving as expected
+ - hsv, hsva, unit functions
+ - fixed lots more bad error messages
+ - fix `@import-once` to use the full path, not the relative one for determining if an import has been imported already
+ - support `:not(:nth-child(3))`
+ - mixin guards take units into account
+ - support unicode descriptors (`U+00A1-00A9`)
+ - support calling mixins with a stack when using `&` (broken in 1.3.1)
+ - support `@namespace` and namespace combinators
+ - when using % with colour functions, take into account a colour is out of 256
+ - when doing maths with a % do not divide by 100 and keep the unit
+ - allow url to contain % (e.g. %20 for a space)
+ - if a mixin guard stops execution a default mixin is not required
+ - units are output in strings (use the unit function if you need to get the value without unit)
+ - do not infinite recurse when mixins call mixins of the same name
+ - fix issue on important on mixin calls
+ - fix issue with multiple comments being confused
+ - tolerate multiple semi-colons on rules
+ - ignore subsequant `@charset`
+ - syncImport option for node.js to read files syncronously
+ - write the output directory if it is missing
+ - change dependency on cssmin to ycssmin
+ - lessc can load files over http
+ - allow calling less.watch() in non dev mode
+ - don't cache in dev mode
+ - less files cope with query parameters better
+ - sass debug statements are now chrome compatible
+ - modifyVars function added to re-render with different root variables
+
+---
+
+### v1.3.1
+
+> Released: 2012-10-18
+
+- Support for comment and @media debugging statements
+- bug fix for async access in chrome extensions
+- new functions tint, shade, multiply, screen, overlay, hardlight, difference, exclusion, average, negation, softlight, red, green, blue, contrast
+- allow escaped characters in attributes
+- in selectors support @{a} directly, e.g. .a.@{a} { color: black; }
+- add fraction parameter to round function
+- much better support for & selector
+- preserve order of link statements client side
+- lessc has better help
+- rhino version fixed
+- fix bugs in clientside error handling
+- support dpi, vmin, vm, dppx, dpcm units
+- Fix ratios in media statements
+- in mixin guards allow comparing colors and strings
+- support for -*-keyframes (for -khtml but now supports any)
+- in mix function, default weight to 50%
+- support @import-once
+- remove duplicate rules in output
+- implement named parameters when calling mixins
+- many numerous bug fixes
+
+---
+
+### v1.3.0
+
+> Released: 2012-03-10
+
+- @media bubbling
+- Support arbitrary entities as selectors
+- [Variadic argument support](https://gist.github.com/1933613)
+- Behaviour of zero-arity mixins has [changed](https://gist.github.com/1933613)
+- Allow `@import` directives in any selector
+- Media-query features can now be a variable
+- Automatic merging of media-query conditions
+- Fix global variable leaks
+- Fix error message on wrong-arity call
+- Fix an `@arguments` behaviour bug
+- Fix `::` selector output
+- Fix a bug when using @media with mixins
+
+---
+
+### v1.2.1
+
+> Released: 2012-01-15
+
+- Fix imports in browser
+- Improve error reporting in browser
+- Fix Runtime error reports from imported files
+- Fix `File not found` import error reporting
+
+---
+
+### v1.2.0
+
+> Released: 2012-01-07
+
+- Mixin guards
+- New function `percentage`
+- New `color` function to parse hex color strings
+- New type-checking stylesheet functions
+- Fix Rhino support
+- Fix bug in string arguments to mixin call
+- Fix error reporting when index is 0
+- Fix browser support in WebKit and IE
+- Fix string interpolation bug when var is empty
+- Support `!important` after mixin calls
+- Support vanilla @keyframes directive
+- Support variables in certain css selectors, like `nth-child`
+- Support @media and @import features properly
+- Improve @import support with media features
+- Improve error reports from imported files
+- Improve function call error reporting
+- Improve error-reporting
8 content/Tools.md
@@ -0,0 +1,8 @@
+
+
+
+
+**LESS2CSS**
+
+[LESS2CSS](http://less2css.org/) is an online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile LESS to CSS in real-time.
+
52 content/Usage-Command-line.md
@@ -0,0 +1,52 @@
+# Command Line Usage
+
+> Compile `.less` files to `.css` using the command line
+
+<span class="warning">Heads up! If the command line isn't your thing, learn more about [[GUI compilers for LESS|GUI-compilers-that-use-Less.js]].</span>
+
+# lessc
+
+The binary included in this repository, `bin/lessc` works with [Node.js](http://nodejs.org/) on *nix, OSX and Windows.
+
+**Usage**: `lessc [option option=parameter ...] <source> [destination]`
+
+**Options**:
+
+```
+-h, --help Print help (this message) and exit.
+-v, --version Print version number and exit.
+ --verbose Be verbose.
+-s, --silent Suppress output of error messages.
+ --line-numbers=TYPE Outputs filename and line numbers. ☃ (1)
+-rp, --rootpath Set rootpath for URL rewriting in relative imports and URLs. ☃ (2)
+ --include-path Set include paths. ☃ (3)
+-ru, --relative-urls Re-write relative URLs to the base less file.
+ --strict-imports Force evaluation of imports.
+ -x, --compress Compress output by removing some whitespaces.
+ --yui-compress Compress output using ycssmin
+-O0, -O1, -O2 Set the parser's optimization level. ☃ (4)
+ --no-color Disable colorized output.
+```
+
+**☃ Comments**:
+
+**(1)** `--line-numbers` `TYPE` can be:
+ * `comments`: output the debug info within comments.
+ * `mediaquery`: outputs the information within a fake media query which is compatible with the SASS format.
+ * `all` does both
+
+**(2)** `--rootpath`: sorks with or without the `relative-urls` option.
+
+**(3)** `--include-path`: separated by `:`. Use `;` on Windows.
+
+**(4)** Optimization levels: The lower the number, the fewer nodes created in the tree. Useful for debugging or if you need to access the individual nodes in the tree.
+
+# Examples
+
+``` bash
+ # compile bootstrap.less to bootstrap.css
+ $ lessc bootstrap.less bootstrap.css
+
+ # compile bootstrap.less to bootstrap.css and minify (compress) the result
+ $ lessc -x bootstrap.less bootstrap.css
+```
140 content/Usage-clientside.md
@@ -0,0 +1,140 @@
+# Clientside Usage
+
+> Using less.js in the browser is great for development, but it's not recommended for production
+
+Client-side is the easiest way to get started and good for developing with LESS. But in production, when performance and reliability is important, _we recommend pre-compiling using node.js or one of the many third party tools available_.
+
+## Getting started
+
+Link your `.less` stylesheets with the `rel` attribute set to "`stylesheet/less`":
+
+```html
+<link rel="stylesheet/less" type="text/css" href="styles.less" />
+```
+
+Next, [download less.js](https://github.com/less/less.js/archive/master.zip) and include it in a `<script></script>` tag in the `<head>` element of your page:
+
+```html
+<script src="less.js" type="text/javascript"></script>
+```
+
+### FAQ
+
+* Make sure you include your stylesheets **before** the script.
+* When you link more than one `.less` stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
+
+## Browser Options
+
+Options are defined by setting them on a global LESS object **before** the `<script src="less.js"></script>`:
+
+``` html
+<!-- set options before less.js script -->
+<script>
+ less = {
+ env: "development",
+ async: false,
+ fileAsync: false,
+ poll: 1000,
+ functions: {},
+ dumpLineNumbers: "comments",
+ relativeUrls: false,
+ rootpath: ":/a.com/"
+ };
+</script>
+<script src="less.js"></script>
+```
+
+### env
+Type: `String`
+Default: `development`
+
+Environment to run may be either `development` or `production`. If the document's URL starts with file:// or localhost it will automatically be set to 'development'.
+
+
+### async
+Type: `Boolean`
+Default: `false`
+
+Load imports asynchronously.
+
+
+### fileAsync
+Type: `Boolean`
+Default: `false`
+
+Load imports asynchronously when in a page under a file protocol.
+
+
+### poll
+Type: `Integer`
+Default: `1000`
+
+The amount of time (in milliseconds) between polls while in watch mode.
+
+
+### functions
+Type: `object`
+
+User functions, keyed by name.
+
+
+### dumpLineNumbers
+Type: `String`
+Options: `comments`|`mediaQuery`|`all`
+Default: `comments`
+
+**TODO**: need more explaination here.
+
+
+### relativeUrls
+Type: `Boolean`
+Default: `false`
+
+Optionally adjust URL's to be relative. When false, URL's are already relative to the entry less file.
+
+
+### rootpath
+Type: `String`
+Default: `false`
+
+A path to add on to the start of every URL resource.
+
+
+## Watch mode
+To enable Watch mode, option `env` must be set to `development`. Then AFTER the less.js file is included, call less.watch(), like this:
+
+```html
+<script src="less.js"></script>
+<script>less.watch()</script>
+```
+
+Alternatively you can temporary enable Watch mode by appending `#!watch` to the URL.
+
+
+## Modify variables
+
+Enables modification of LESS variables in run-time. When called with new values, the LESS file is recompiled without reloading. Simple basic usage:
+
+```js
+less.modifyVars({
+ '@buttonFace': '#5B83AD',
+ '@buttonText': '#D9EEF2'
+});
+```
+
+## Debugging
+It is possible to output rules in your CSS which allow tools to locate the source of the rule.
+
+Either specify the option `dumpLineNumbers` as above or add `!dumpLineNumbers:mediaQuery` to the url.
+
+You can use the "comments" option with [FireLESS](https://addons.mozilla.org/en-us/firefox/addon/fireless/) and the "mediaQuery" option with FireBug/Chrome dev tools (it is identical to the SCSS media query debugging format).
+
+
+## More information
+* **Usage**: for an introduction to the language, please visit [lesscss.org](http://lesscss.org).
+* **Developer info**: visit the wiki homepage [wiki](https://github.com/cloudhead/less.js/wiki) ## Watch mode
+
+*Watch mode* is a client-side feature which enables your styles to refresh automatically as they are changed.
+
+To enable it, append '`#!watch`' to the browser URL, then refresh the page. Alternatively, you can run `less.watch()` from the console.
+
6 content/about.md
@@ -0,0 +1,6 @@
+# About
+
+> LESS was developed by [Alexis Sellier](http://cloudhead.io), more commonly known as [cloudhead](http://cloudhead.io).
+
+The Less.js project is now mantained and extended by the community and the core LESS team.
+
150 content/compiling-less-to-css.md
@@ -0,0 +1,150 @@
+# Options for Compiling LESS to CSS
+
+> This page provides a basic overview of the options for compiling LESS to CSS.
+
+* [Command line options](#command-line)
+* [GUI compilers](#gui-compilers)
+
+
+<a name="command-line"></a>
+## Command Line
+
+Depending on the platform there are a number of ways to compile `.less` files to `.css` using the command line.
+
+
+### Cross Platform
+
+**lessc**
+
+The binary included in this repository, `bin/lessc` works with Node.js on *nix, OSX and Windows.
+
+Installation and usage:
+
+1. Install [Node.js with the Node Package Manager](http://nodejs.org/download/) if you don't have it installed yet.
+2. `npm install -g less`
+
+And then...
+
+```bash
+lessc source [destination] [--version] [--compress] [--yui-compress] [--verbose] [--silent] [--no-color] [--include-path=path1:path2]
+```
+
+TODO: Add more detail about less command line options, and how to use them. This wiki is for designers and developers.
+
+
+**Wro4j Runner CLI**
+
+Download the [wro4j-runner.jar](http://wro4j.googlecode.com/files/wro4j-runner-1.4.1-jar-with-dependencies.jar) file and run the following command:
+
+```java
+java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss
+```
+
+More details can be found here: [Wro4j Runner CLI](http://code.google.com/p/wro4j/wiki/wro4jRunner)
+
+
+**Recess.js**
+
+Twitter's code quality tool for CSS built on top of LESS. Visit the [Recess repo on GitHub](https://github.com/twitter/recess).
+
+
+**CSS::LESSp**
+
+http://search.cpan.org/~drinchev/CSS-LESSp/
+
+```
+lessp.pl css.less > css.css
+```
+
+
+### Windows
+
+**Using Windows Script Host**
+
+[LESS.js for Windows](https://github.com/duncansmart/less.js-windows) with this usage:
+
+```
+cscript //nologo lessc.wsf input.less [output.css] [-compress]
+```
+
+or
+
+```
+lessc input.less [output.css] [-compress]
+```
+
+**dotless**
+
+[dotless for Windows](http://www.dotlesscss.org/) can be run like this:
+
+```
+dotless.Compiler.exe [-switches] <inputfile> [outputfile]
+```
+
+
+<a name="gui-compilers"></a>
+## GUI Compilers
+
+If you are interested in command line usage and tools see [Command-Line-use-of-LESS](https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS).
+
+**Tip**: be sure to try out the different LESS tools available for your platform, to see which one fits you best.
+
+
+
+### Cross platform compilers
+
+
+TODO:
+ * Host all images in the wiki.
+ * Format all images to the same size, large and easy to see.
+ * Ask the leads for all compilers to provide links to support pages.
+
+
+#### Crunch!
+[http://crunchapp.net/](http://crunchapp.net/)
+
+Crunch is not just a LESS compiler, it is also a LESS editor for Windows and Mac. If you work a lot with LESS files, you should definitely try it out.
+Crunch is built on the Adobe AIR platform.
+
+![Crunch screenshot](http://crunchapp.net/img/Crunch.png)
+
+#### SimpLESS
+[http://wearekiss.com/simpless](http://wearekiss.com/simpless)
+
+SimpLESS is a minimalistic LESS compiler. Just drag, drop and compile. One of the unique features of SimpLESS is that it supports 'prefixing' your CSS by using [http://prefixr.com.](http://prefixr.com).
+SimpLESS is built on the Titanium platform.
+
+![SimpLESS screenshot](http://wearekiss.com/lib/img/simpless/app-windows.png?1)
+
+
+
+### Linux
+
+#### Plessc
+[https://github.com/Mte90/Plessc](https://github.com/Mte90/Plessc)
+
+Plessc is a gui fronted made with PyQT. Support the log and the option for open the less file (or the less file present in the folder of the input file) on the editor choosen.
+
+![Plessc screenshot](http://www.mte90.net/wp-content/uploads/2013/02/screenshot.png)
+
+
+
+### OSx
+
+#### LESS.app
+[http://incident57.com/less](http://incident57.com/less)
+
+LESS.app was the first GUI compiler for LESS. LESS.app has a 'Compiler' tab where you can see the compiler results.
+
+![LESS.app screenshot](http://incident57.com/less/images/hero-window.png)
+
+
+
+### Windows
+
+#### WinLess
+[http://winless.org](http://winless.org)
+
+WinLess started out as a clone of LESS.app. It takes a more feature-complete approach and has several settings. It also supports starting with command line arguments.
+
+![WinLess screenshot](http://files.web-mark.nl/winless/style/images/WinLess_Screenshot.png)
1,031 content/doc.md
@@ -0,0 +1,1031 @@
+As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use <em>existing</em> CSS syntax. This makes learning LESS a <em>breeze</em>, and if in doubt, lets you fall back to CSS.
+
+## # Variables
+
+These are pretty self-explanatory:
+
+```less
+@nice-blue: #5B83AD;
+@light-blue: (@nice-blue + #111);
+
+#header {
+ color: @light-blue;
+}
+```
+
+Compiles to:
+
+```css
+#header {
+ color: #6c94be;
+}
+```
+
+It is also possible to define variables with a _variable name_:
+
+```less
+@fnord: "I am fnord.";
+@var: 'fnord';
+
+.label {
+ content: @@var;
+}
+```
+
+Which compiles to:
+
+```css
+.label {
+ content: "I am fnord.";
+}
+```
+
+When defining a variable twice, the last definition of the variable is used, searching from the current scope upwards. This is similar to css itself where the last property inside a definition is used to determine the value.
+
+For instance:
+
+```less
+@var: 0;
+.class1 {
+ @var: 1;
+ .class {
+ @var: 2;
+ three: @var;
+ @var: 3;
+ }
+ one: @var;
+}
+```
+
+Compiles to:
+
+```css
+.class1 .class {
+ three: 3;
+}
+.class {
+ one: 1;
+}
+```
+
+Variables are lazy loaded and do not have to be declared before being used.
+
+Valid less snippet:
+
+```less
+.lazy-eval {
+ width: @var;
+}
+
+@var: @a;
+@a: 9%;
+```
+
+
+this is valid less too:
+
+```less
+.lazy-eval-scope {
+ width: @var;
+ @a: 9%;
+}
+
+@var: @a;
+@a: 100%;
+```
+
+both compile into:
+
+```css
+.lazy-eval-scope {
+ width: 9%;
+}
+```
+
+
+## Mixins
+
+In LESS, it is possible to include a bunch of properties from one ruleset into another ruleset. So say we have the following class:
+
+```css
+.bordered {
+ border-top: dotted 1px black;
+ border-bottom: solid 2px black;
+}
+```
+
+And we want to use these properties inside other rulesets. Well, we just have to drop in the name of
+the class in any ruleset we want to include its properties, like so:
+
+```css
+#menu a {
+ color: #111;
+ .bordered;
+}
+.post a {
+ color: red;
+ .bordered;
+}
+```
+
+The properties of the `.bordered` class will now appear in both `#menu a` and `.post a`:
+
+```css
+#menu a {
+ color: #111;
+ border-top: dotted 1px black;
+ border-bottom: solid 2px black;
+}
+.post a {
+ color: red;
+ border-top: dotted 1px black;
+ border-bottom: solid 2px black;
+}
+```
+
+Any CSS *class* or *id* ruleset can be mixed-in that way.
+
+Note: Variables are also mixed in, so variables from a mixin will be placed into the current scope. This is contentious and may change in the future.
+
+## Parametric Mixins
+
+LESS has a special type of ruleset which can be mixed in like classes, but accepts parameters. Here's the canonical example:
+
+```less
+.border-radius (@radius) {
+ border-radius: @radius;
+ -moz-border-radius: @radius;
+ -webkit-border-radius: @radius;
+}
+```
+
+And here's how we can mix it into various rulesets:
+
+```less
+#header {
+ .border-radius(4px);
+}
+.button {
+ .border-radius(6px);
+}
+```
+
+Parametric mixins can also have default values for their parameters:
+
+```less
+.border-radius (@radius: 5px) {
+ border-radius: @radius;
+ -moz-border-radius: @radius;
+ -webkit-border-radius: @radius;
+}
+```
+
+We can invoke it like this now:
+
+```less
+#header {
+ .border-radius;
+}
+```
+
+And it will include a 5px border-radius.
+
+You can also use parametric mixins which don't take parameters. This is useful if you want to hide the ruleset from the CSS output,
+but want to include its properties in other rulesets:
+
+```less
+.wrap () {
+ text-wrap: wrap;
+ white-space: pre-wrap;
+ white-space: -moz-pre-wrap;
+ word-wrap: break-word;
+}
+
+pre { .wrap }
+```
+
+Which would output:
+
+```css
+pre {
+ text-wrap: wrap;
+ white-space: pre-wrap;
+ white-space: -moz-pre-wrap;
+ word-wrap: break-word;
+}
+```
+
+### Mixins With Multiple Parameters
+Parameters are either *semicolon* or *comma* separated. It is recommended to use *semicolon*. The symbol comma has double meaning: it can be interpreted either as a mixin parameters separator or css list separator.
+
+Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists:
+
+* two arguments and each contains comma separated list: `.name(1, 2, 3; something, else)`,
+* three arguments and each contains one number: `.name(1, 2, 3)`,
+* use dummy semicolon to create mixin call with one argument containing comma separated css list: `.name(1, 2, 3;)`,
+* comma separated default value: `.name(@param1: red, blue;)`.
+
+It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply. If you used the mixin with one parameter e.g. `.mixin(green);`, then properties of all mixins with exactly one mandatory parameter will be used:
+
+```less
+.mixin(@color) {
+ color-1: @color;
+}
+.mixin(@color; @padding:2) {
+ color-2: @color;
+ padding-2: @padding;
+}
+.mixin(@color; @padding; @margin: 2) {
+ color-3: @color;
+ padding-3: @padding;
+ margin: @margin @margin @margin @margin;
+}
+.some .selector div {
+ .mixin(#008000);
+}
+```
+
+compiles into:
+
+```css
+.some .selector div {
+ color-1: #008000;
+ color-2: #008000;
+ padding-2: 2;
+}
+```
+
+
+### The `@arguments` variable
+
+`@arguments` has a special meaning inside mixins, it contains all the arguments passed, when the mixin was called. This is useful
+if you don't want to deal with individual parameters:
+
+```less
+.box-shadow (@x: 0; @y: 0; @blur: 1px; @color: #000) {
+ -webkit-box-shadow: @arguments;
+ -moz-box-shadow: @arguments;
+ box-shadow: @arguments;
+}
+.big-block {
+ .box-shadow(2px; 5px);
+}
+```
+
+Which results in:
+
+```css
+.big-block {
+ -webkit-box-shadow: 2px 5px 1px #000;
+ -moz-box-shadow: 2px 5px 1px #000;
+ box-shadow: 2px 5px 1px #000;
+}
+```
+
+### Advanced arguments and the `@rest` variable
+
+You can use `...` if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.
+
+```less
+.mixin (...) { // matches 0-N arguments
+.mixin () { // matches exactly 0 arguments
+.mixin (@a: 1) { // matches 0-1 arguments
+.mixin (@a: 1; ...) { // matches 0-N arguments
+.mixin (@a; ...) { // matches 1-N arguments
+```
+
+Furthermore:
+
+```less
+.mixin (@a; @rest...) {
+ // @rest is bound to arguments after @a
+ // @arguments is bound to all arguments
+}
+```
+
+## The Keyword !important
+Use the !important keyword after mixin call to mark all properties brought by it as !important:
+
+Sample input:
+
+```less
+.mixin (@a: 0) {
+ border: @a;
+ boxer: @a;
+}
+.unimportant {
+ .mixin(1);
+}
+.important {
+ .mixin(2) !important;
+}
+```
+
+compiled into:
+
+```css
+.unimportant {
+ border: 1;
+ boxer: 1;
+}
+.important {
+ border: 2 !important;
+ boxer: 2 !important;
+}
+```
+
+## Pattern-matching and Guard expressions
+
+Sometimes, you may want to change the behaviour of a mixin,
+based on the parameters you pass to it. Let's start with something
+basic:
+
+```less
+.mixin (@s; @color) { ... }
+
+.class {
+ .mixin(@switch; #888);
+}
+```
+
+Now let's say we want `.mixin` to behave differently, based on the value of `@switch`,
+we could define `.mixin` as such:
+
+```less
+.mixin (dark; @color) {
+ color: darken(@color, 10%);
+}
+.mixin (light; @color) {
+ color: lighten(@color, 10%);
+}
+.mixin (@_; @color) {
+ display: block;
+}
+```
+
+Now, if we run:
+
+```less
+@switch: light;
+
+.class {
+ .mixin(@switch; #888);
+}
+```
+
+We will get the following CSS:
+
+```css
+.class {
+ color: #a2a2a2;
+ display: block;
+}
+```
+
+Where the color passed to `.mixin` was lightened. If the value of `@switch` was `dark`,
+the result would be a darker color.
+
+Here's what happened:
+
+* The first mixin definition didn't match because it expected `dark` as the first argument.
+* The second mixin definition matched, because it expected `light`.
+* The third mixin definition matched because it expected any value.
+
+Only mixin definitions which matched were used. Variables match and bind to any value.
+Anything other than a variable matches only with a value equal to itself.
+
+We can also match on arity, here's an example:
+
+```less
+.mixin (@a) {
+ color: @a;
+}
+.mixin (@a; @b) {
+ color: fade(@a; @b);
+}
+```
+
+Now if we call `.mixin` with a single argument, we will get the output of the first definition,
+but if we call it with *two* arguments, we will get the second definition, namely `@a` faded to `@b`.
+
+### Guards
+
+Guards are useful when you want to match on *expressions*, as opposed to simple values or arity. If you are
+familiar with functional programming, you have probably encountered them already.
+
+In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement
+conditional execution via **guarded mixins** instead of if/else statements, in the vein of `@media`
+query feature specifications.
+
+Let's start with an example:
+
+```less
+.mixin (@a) when (lightness(@a) >= 50%) {
+ background-color: black;
+}
+.mixin (@a) when (lightness(@a) < 50%) {
+ background-color: white;
+}
+.mixin (@a) {
+ color: @a;
+}
+```
+
+The key is the **`when`** keyword, which introduces a guard sequence (here with only one guard). Now if we run the following
+code:
+
+```less
+.class1 { .mixin(#ddd) }
+.class2 { .mixin(#555) }
+```
+
+Here's what we'll get:
+
+```css
+.class1 {
+ background-color: black;
+ color: #ddd;
+}
+.class2 {
+ background-color: white;
+ color: #555;
+}
+```
+
+The full list of comparison operators usable in guards are: **`> >= = =< <`**. Additionally, the keyword `true`
+is the only truthy value, making these two mixins equivalent:
+
+```
+.truth (@a) when (@a) { ... }
+.truth (@a) when (@a = true) { ... }
+```
+
+Any value other than the keyword `true` is falsy:
+
+```less
+.class {
+ .truth(40); // Will not match any of the above definitions.
+}
+```
+
+Guards can be separated with a comma '`,`'--if any of the guards evaluates to true, it's
+considered as a match:
+
+```less
+.mixin (@a) when (@a > 10), (@a < -10) { ... }
+```
+
+Note that you can also compare arguments with each other, or with non-arguments:
+
+```
+ @media: mobile;
+
+ .mixin (@a) when (@media = mobile) { ... }
+ .mixin (@a) when (@media = desktop) { ... }
+
+ .max (@a; @b) when (@a > @b) { width: @a }
+ .max (@a; @b) when (@a < @b) { width: @b }
+```
+
+Lastly, if you want to match mixins based on value type, you can use the *is\** functions:
+
+```
+ .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
+ .mixin (@a; @b: black) when (iscolor(@b)) { ... }
+```
+
+Here are the basic type checking functions:
+
+* `iscolor`
+* `isnumber`
+* `isstring`
+* `iskeyword`
+* `isurl`
+
+If you want to check if a value, in addition to being a number, is in a specific unit, you may use one of:
+
+* `ispixel`
+* `ispercentage`
+* `isem`
+* `isunit`
+
+Last but not least, you may use the **`and`** keyword to provide additional conditions inside a guard:
+
+```
+ .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
+```
+
+And the **`not`** keyword to negate conditions:
+
+```
+ .mixin (@b) when not (@b > 0) { ... }
+```
+
+## Nested rules
+
+LESS gives you the ability to use *nesting* instead of, or in combination with cascading.