less 2.4.0 → 2.5.0

data/lib/less/js/README.md

@@ -1,20 +1,350 @@
-less.js
-=======
+# [Less.js v1.6.2](http://lesscss.org)
 
-The **dynamic** stylesheet language.
+> The **dynamic** stylesheet language. [http://lesscss.org](http://lesscss.org).
 
-<http://lesscss.org>
+This is the JavaScript, and now official, stable version of LESS.
 
-about
------
 
-This is the JavaScript, and now official, stable version of LESS.
+## Getting Started
+
+Options for adding Less.js to your project:
+
+* Install with [NPM](https://npmjs.org/): `npm install less`
+* [Download the latest release][download]
+* Clone the repo: `git clone git://github.com/less/less.js.git`
+
+
+
+## Feature Highlights
+LESS extends CSS with dynamic features such as:
+
+* [nesting](#nesting)
+* [variables](#variables)
+* [operations](#operations)
+* [mixins](#mixins)
+* [extend](#extend) (selector inheritance)
+
+To learn about the many other features Less.js has to offer please visit [http://lesscss.org](http://lesscss.org) and [the Less.js wiki][wiki]
+
+
+### Examples
+#### nesting
+Take advantage of nesting to make code more readable and maintainable. This:
+
+```less
+.nav > li > a {
+  border: 1px solid #f5f5f5;
+  &:hover {
+    border-color: #ddd;
+  }
+}
+```
+
+renders to:
+
+```css
+.nav > li > a {
+  border: 1px solid #f5f5f5;
+}
+.nav > li > a:hover {
+  border-color: #ddd;
+}
+```
+
+
+#### variables
+Updated commonly used values from a single location.
+
+```less
+// Variables ("inline" comments like this can be used)
+@link-color:  #428bca; // appears as "sea blue"
+
+/* Or "block comments" that span
+   multiple lines, like this */
+a {
+  color: @link-color; // use the variable in styles
+}
+```
+
+Variables can also be used in `@import` statements, URLs, selector names, and more.
+
+
+
+#### operations
+Continuing with the same example above, we can use our variables even easier to maintain with _operations_, which enables the use of addition, subraction, multiplication and division in your styles:
+
+```less
+// Variables
+@link-color:        #428bca;
+@link-color-hover:  darken(@link-color, 10%);
+
+// Styles
+a {
+  color: @link-color;
+}
+a:hover {
+  color: @link-color-hover;
+}
+```
+renders to:
+
+```css
+a {
+  color: #428bca;
+}
+a:hover {
+  color: #3071a9;
+}
+```
+
+#### mixins
+##### "implicit" mixins
+Mixins enable you to apply the styles of one selector inside another selector like this:
+
+```less
+// Variables
+@link-color:        #428bca;
+
+// Any "regular" class...
+.link {
+  color: @link-color;
+}
+a {
+  font-weight: bold;
+  .link; // ...can be used as an "implicit" mixin
+}
+```
+
+renders to:
+
+```css
+.link {
+  color: #428bca;
+}
+a {
+  font-weight: bold;
+  color: #428bca;
+}
+```
+
+So any selector can be an "implicit mixin". We'll show you a DRYer way to do this below.
+
+
+
+##### parametric mixins
+Mixins can also accept parameters:
+
+```less
+// Transition mixin
+.transition(@transition) {
+  -webkit-transition: @transition;
+     -moz-transition: @transition;
+       -o-transition: @transition;
+          transition: @transition;
+}
+```
+
+used like this:
+
+```less
+// Variables
+@link-color:        #428bca;
+@link-color-hover:  darken(@link-color, 10%);
+
+//Transition mixin would be anywhere here
+
+a {
+  font-weight: bold;
+  color: @link-color;
+  .transition(color .2s ease-in-out);
+  // Hover state
+  &:hover {
+    color: @link-color-hover;
+  }
+}
+```
+
+renders to:
+
+```css
+a {
+  font-weight: bold;
+  color: #428bca;
+  -webkit-transition: color 0.2s ease-in-out;
+     -moz-transition: color 0.2s ease-in-out;
+       -o-transition: color 0.2s ease-in-out;
+          transition: color 0.2s ease-in-out;
+}
+a:hover {
+  color: #3071a9;
+}
+```
+
+
+#### extend
+The `extend` feature can be thought of as the _inverse_ of mixins. It accomplishes the goal of "borrowing styles", but rather than copying all the rules of _Selector A_ over to _Selector B_, `extend` copies the name of the _inheriting selector_ (_Selector B_) over to the _extending selector_ (_Selector A_). So continuing with the example used for [mixins](#mixins) above, extend works like this:
+
+```less
+// Variables
+@link-color:        #428bca;
+
+.link {
+  color: @link-color;
+}
+a:extend(.link) {
+  font-weight: bold;
+}
+// Can also be written as
+a {
+  &:extend(.link);
+  font-weight: bold;
+}
+```
+
+renders to:
+
+```css
+.link, a {
+  color: #428bca;
+}
+a {
+  font-weight: bold;
+}
+```
+
+## Usage
+
+### Compiling and Parsing
+Invoke the compiler from node:
+
+```javascript
+var less = require('less');
+
+less.render('.class { width: (1 + 1) }', function (e, css) {
+    console.log(css);
+});
+```
+
+Outputs:
+
+```css
+.class {
+  width: 2;
+}
+```
+
+You may also manually invoke the parser and compiler:
+
+```javascript
+var parser = new(less.Parser);
+
+parser.parse('.class { width: (1 + 1) }', function (err, tree) {
+    if (err) { return console.error(err) }
+    console.log(tree.toCSS());
+});
+```
+
+
+### Configuration
+You may also pass options to the compiler:
+
+```javascript
+var parser = new(less.Parser)({
+    paths: ['.', './src/less'], // Specify search paths for @import directives
+    filename: 'style.less'      // Specify a filename, for better error messages
+});
+
+parser.parse('.class { width: (1 + 1) }', function (e, tree) {
+    tree.toCSS({ compress: true }); // Minify CSS output
+});
+```
+
+## More information
+
+For general information on the language, configuration options or usage visit [lesscss.org](http://lesscss.org) or [the less wiki][wiki].
+
+Here are other resources for using Less.js:
+
+* [stackoverflow.com][so] is a great place to get answers about Less.
+* [node.js tools](https://github.com/less/less.js/wiki/Converting-LESS-to-CSS) for converting Less to CSS
+* [GUI compilers for Less](https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js)
+* [Less.js Issues][issues] for reporting bugs
+
+
+
+## Contributing
+Please read [CONTRIBUTING.md](./CONTRIBUTING.md). Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).
+
+### Reporting Issues
+
+Before opening any issue, please search for existing issues and read the [Issue Guidelines](https://github.com/necolas/issue-guidelines), written by [Nicolas Gallagher](https://github.com/necolas/). After that if you find a bug or would like to make feature request, [please open a new issue][issues].
+
+Please report documentation issues in [the documentation project](https://github.com/less/less-docs).
+
+### Development
+
+#### Install Less.js
+
+Start by either [downloading this project][download] manually, or in the command line:
+
+```shell
+git clone https://github.com/less/less.js.git "less"
+```
+and then `cd less`.
+
+
+#### Install dependencies
+
+To install all the dependencies for less development, run:
+
+```shell
+npm install
+```
+
+If you haven't run grunt before, install grunt-cli globally so you can just run `grunt`
+
+```shell
+npm install grunt-cli -g
+```
+
+You should now be able to build Less.js, run tests, benchmarking, and other tasks listed in the Gruntfile.
+
+## Using Less.js Grunt
+
+Tests, benchmarking and building is done using Grunt `~0.4.1`. If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to install and use Grunt plugins, which are necessary for development with Less.js.
+
+The Less.js [Gruntfile](Gruntfile.js) is configured with the following "convenience tasks" :
+
+#### test - `grunt`
+Runs jshint, nodeunit and headless jasmine tests using [phantomjs](http://code.google.com/p/phantomjs/). You must have phantomjs installed for the jasmine tests to run.
+
+#### test - `grunt benchmark`
+Runs the benchmark suite.
+
+#### build for testing browser - 'grunt browser'
+This builds less.js and puts it in 'test/browser/less.js'
+
+#### build - `grunt stable | grunt beta | grunt alpha`
+Builds Less.js from from the `/lib/less` source files. This is done by the developer releasing a new release, do not do this if you are creating a pull request.
+
+#### readme - `grunt readme`
+Build the README file from [a template](build/README.md) to ensure that metadata is up-to-date and (more likely to be) correct.
+
+Please review the [Gruntfile](Gruntfile.js) to become acquainted with the other available tasks.
+
+**Please note** that if you have any issues installing dependencies or running any of the Gruntfile commands, please make sure to uninstall any previous versions, both in the local node_modules directory, and clear your global npm cache, and then try running `npm install` again. After that if you still have issues, please let us know about it so we can help.
+
+
+## Release History
+See the [changelog](CHANGELOG.md)
 
-For more information on the language and usage visit [lesscss.org](http://lesscss.org). More information also available [in our wiki](https://github.com/less/less.js/wiki)
+## [License](LICENSE)
 
-license
--------
+Copyright (c) 2009-2014 [Alexis Sellier](http://cloudhead.io/) & The Core Less Team
+Licensed under the [Apache License](LICENSE).
 
-See `LICENSE` file.
 
-> Copyright (c) 2009-2013 Alexis Sellier & The Core Less Team
+[so]: http://stackoverflow.com/questions/tagged/twitter-bootstrap+less "StackOverflow.com"
+[issues]: https://github.com/less/less.js/issues "GitHub Issues for Less.js"
+[wiki]: https://github.com/less/less.js/wiki "The official wiki for Less.js"
+[download]: https://github.com/less/less.js/zipball/master "Download Less.js"

data/lib/less/js/benchmark/benchmark.less

@@ -203,7 +203,7 @@ div.browse {
     }
     li.paginate.previous a div b { border-right: 15px solid @white; border-left: none; left: 12px; }
     li.paginate.next a div b { border-left: 15px solid @white; border-right: none; left: 16px; }
-  }  
+  }
   > div.footer {
     padding: 9px 10px 10px; background: @light_grey * 0.75 + @white * 0.25; overflow: hidden;
     border-top: 1px solid @light_grey; .border_radius_bottom(3);
@@ -231,7 +231,7 @@ div.browse.with_options > ul { .border_radius_top(0); }
 div.browse.with_footer > ul { .border_radius_bottom(0); }
 /* Browse List */
 div.browse.list {
-> ul {
+  > ul {
     margin: 0; min-height: 320px;
     padding: 10px 0 0 10px; overflow: hidden;
     > li {
@@ -347,7 +347,7 @@ div.browse.brands.list {
     }
     .all a { font-weight: bold; }
     .current a {
-      background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg; 
+      background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg;
       padding-left: 10px;
     }
   }
@@ -437,7 +437,7 @@ div.voted {
   a.up {
     float: left; background: @colour_positive * 0.66 + @bg * 0.15; .border_radius_left(3);
     :hover { background: @colour_positive * 0.85 + @bg * 0.15; }
-  } 
+  }
   a.down {
     float: left; background: @colour_negative * 0.66 + @bg * 0.15; .border_radius_right(3);
     margin: 0 5px 0 1px;
@@ -460,7 +460,7 @@ div.panel {
   margin: 0 0 20px; position: relative; .box_shadow(0, 0, 3, @light_grey * 0.66 + @white * 0.33); .border_radius(3);
   > div.header {
     background: @bg url('/images/panel_header_bg.png') repeat-x top left; border-bottom: 1px solid (@bg * 0.66 + @black * 0.33);
-    padding: 5px 10px 4px; .border_radius_top(3); min-height: 18px; 
+    padding: 5px 10px 4px; .border_radius_top(3); min-height: 18px;
     h2 { font-size: 16px; margin: 0; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
     h3 { color: @white; font-size: 14px; margin: 0; line-height: 18px; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
     small { display: block; font-size: 12px; color: @light_grey * 0.25 + @white * 0.75; }
@@ -603,7 +603,7 @@ ul.people.list {
     margin: 0 0 10px; padding: 0 0 10px; overflow: hidden; float: none; width: auto; .border_radius(0);
     border: none; border-bottom: 1px solid (@light_grey * 0.33 + @white * 0.66);
     span.points {
-      float: right; display: block; padding: 5px; background: @light_grey * 0.15 + @white * 0.85; line-height: 1; 
+      float: right; display: block; padding: 5px; background: @light_grey * 0.15 + @white * 0.85; line-height: 1;
       text-align: center; width: 50px; height: 30px; .border_radius(3); margin: 0 0 0 10px;
       strong { display: block; color: @black; font-size: 16px; margin: 2px 0 0; }
       label { color: @grey; text-transform: uppercase; font-size: 10px; }
@@ -743,7 +743,7 @@ ul.people.tiled {
             height: 0; float: right; display: none;
           }
           span {
-            .border_radius(3); background: @bg; display: block; 
+            .border_radius(3); background: @bg; display: block;
             line-height: 30px; padding: 0 10px; font-size: 14px; font-weight: bold; margin: 0 10px 0 0;
           }
         }
@@ -798,7 +798,7 @@ ul.people.tiled {
           img { vertical-align: middle; float: left; }
           .name { font-weight: bold; font-size: 14px; display: block; margin: -2px 0 0 42px; }
           small {
-            font-size: 12px; color: @grey; display: block; margin-left: 42px; 
+            font-size: 12px; color: @grey; display: block; margin-left: 42px;
             strong { color: @black; font-weight: normal; }
           }
           :hover {
@@ -910,7 +910,7 @@ div.blank {
 }
 
 div.blank.small {
-  padding: 10px 20px; 
+  padding: 10px 20px;
   h4 { font-weight: normal; font-size: 16px; }
   p { margin: 0; }
 }
@@ -942,7 +942,7 @@ div.panel {
     div.content.browse {
       padding: 0; margin: 0;
       > ul {
-          min-height: 0; .border_radius(0);
+        min-height: 0; .border_radius(0);
         > li {
           div.thumbnail {
             a.thumbnail { padding: 5px; }
@@ -957,7 +957,7 @@ div.panel {
 
     div.content.browse.ads > ul > li {
       width: 93px;
-      > div.thumbnail a.thumbnail { width: 83px; height: 62px; } 
+      > div.thumbnail a.thumbnail { width: 83px; height: 62px; }
     }
     div.content.browse.brands {
       .border_radius(3);
@@ -1196,7 +1196,7 @@ label.list_number.large {
           span { display: block; margin: 0 0 0 130px; }
         }
         p:last-child { margin: 0; }
-        
+
       }
     }
     div.login {
@@ -1268,7 +1268,7 @@ label.list_number.large {
           b.voted.against { background: @colour_negative * 0.33 + @white * 0.66; }
         }
         /* Temporarily removed avatar and symbol */
-/*        div.symbols a.agent, b { display: none; }*/
+        /*        div.symbols a.agent, b { display: none; }*/
         div.description {
           font-size: 12px; color: @grey;
           a.agent { font-weight: bold; }
@@ -1293,11 +1293,11 @@ label.list_number.large {
       }
       li.new_comment.ad, li.endorsed.ad, li.voted {
         div.description, div.content { margin-left: 106px; }
-/*        div.description, div.content { margin-left: 53px; }*/
+        /*        div.description, div.content { margin-left: 53px; }*/
       }
       li.new_comment.brand, li.replied_to, li.endorsed.brand, li.connected, li.sn_setup {
         div.description, div.content { margin-left: 96px; }
-/*        div.description, div.content { margin-left: 43px; }*/
+        /*        div.description, div.content { margin-left: 43px; }*/
       }
       li.replied_to {
         div.content {
@@ -1530,7 +1530,7 @@ div.browse {
     }
     li.paginate.previous a div b { border-right: 15px solid @white; border-left: none; left: 12px; }
     li.paginate.next a div b { border-left: 15px solid @white; border-right: none; left: 16px; }
-  }  
+  }
   > div.footer {
     padding: 9px 10px 10px; background: @light_grey * 0.75 + @white * 0.25; overflow: hidden;
     border-top: 1px solid @light_grey; .border_radius_bottom(3);
@@ -1558,7 +1558,7 @@ div.browse.with_options > ul { .border_radius_top(0); }
 div.browse.with_footer > ul { .border_radius_bottom(0); }
 /* Browse List */
 div.browse.list {
-> ul {
+  > ul {
     margin: 0; min-height: 320px;
     padding: 10px 0 0 10px; overflow: hidden;
     > li {
@@ -1674,7 +1674,7 @@ div.browse.brands.list {
     }
     .all a { font-weight: bold; }
     .current a {
-      background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg; 
+      background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg;
       padding-left: 10px;
     }
   }
@@ -1764,7 +1764,7 @@ div.voted {
   a.up {
     float: left; background: @colour_positive * 0.66 + @bg * 0.15; .border_radius_left(3);
     :hover { background: @colour_positive * 0.85 + @bg * 0.15; }
-  } 
+  }
   a.down {
     float: left; background: @colour_negative * 0.66 + @bg * 0.15; .border_radius_right(3);
     margin: 0 5px 0 1px;
@@ -1833,7 +1833,7 @@ div.voted {
             height: 0; float: right; display: none;
           }
           span {
-            .border_radius(3); background: @bg; display: block; 
+            .border_radius(3); background: @bg; display: block;
             line-height: 30px; padding: 0 10px; font-size: 14px; font-weight: bold; margin: 0 10px 0 0;
           }
         }
@@ -1888,7 +1888,7 @@ div.voted {
           img { vertical-align: middle; float: left; }
           .name { font-weight: bold; font-size: 14px; display: block; margin: -2px 0 0 42px; }
           small {
-            font-size: 12px; color: @grey; display: block; margin-left: 42px; 
+            font-size: 12px; color: @grey; display: block; margin-left: 42px;
             strong { color: @black; font-weight: normal; }
           }
           :hover {
@@ -2000,7 +2000,7 @@ div.blank {
 }
 
 div.blank.small {
-  padding: 10px 20px; 
+  padding: 10px 20px;
   h4 { font-weight: normal; font-size: 16px; }
   p { margin: 0; }
 }
@@ -2109,11 +2109,11 @@ div.panel {
   color: red; /* A C-style comment */
   background-color: orange; // A little comment
   font-size: 12px;
-  
+
   /* lost comment */ content: @var;
-  
+
   border: 1px solid black;
-  
+
   // padding & margin //
   padding: 0;
   margin: 2em;
@@ -2127,33 +2127,33 @@ div.panel {
 
 #last { color: blue }
 //
-.comma-delimited { 
+.comma-delimited {
   background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
   text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
   -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
-    0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
+  0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
 }
 @font-face {
   font-family: Headline;
   src: local(Futura-Medium),
-       url(fonts.svg#MyGeometricModern) format("svg");
+  url(fonts.svg#MyGeometricModern) format("svg");
 }
 .other {
   -moz-transform: translate(0, 11em) rotate(-90deg);
 }
 p:not([class*="lead"]) {
-  color: black; 
+  color: black;
 }
 
 input[type="text"].class#id[attr=32]:not(1) {
-  color: white;
-}
+                                      color: white;
+                                    }
 
 div#id.class[a=1][b=2].class:not(1) {
-  color: white;
-}
+                        color: white;
+                      }
 
-ul.comma > li:not(:only-child)::after { 
+ul.comma > li:not(:only-child)::after {
   color: white;
 }
 
@@ -2250,7 +2250,7 @@ p + h1 {
 #more-shorthands {
   margin: 0;
   padding: 1px 0 2px 0;
-  font: normal small/20px 'Trebuchet MS', Verdana, sans-serif; 
+  font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
 }
 
 .misc {
@@ -2271,7 +2271,7 @@ p + h1 {
 
 #functions {
   @var: 10;
-  color: color("evil red"); // #660000
+  color: color("red");
   width: increment(15);
   height: undefined("self");
   border-width: add(2, 3);
@@ -2303,7 +2303,7 @@ p + h1 {
 }
 
 .mixina (@style, @width, @color: black) {
-    border: @width @style @color;
+  border: @width @style @color;
 }
 
 .mixiny
@@ -2363,11 +2363,11 @@ body {
 }
 
 .nested-ruleset (@width: 200px) {
-    width: @width;
-    .column { margin: @width; }
+  width: @width;
+  .column { margin: @width; }
 }
 .content {
-    .nested-ruleset(600px);
+  .nested-ruleset(600px);
 }
 
 //
@@ -2385,8 +2385,8 @@ body {
 //
 
 .var-inside () {
-    @var: 10px;
-    width: @var;
+  @var: 10px;
+  width: @var;
 }
 #var-inside { .var-inside; }
 .mix-inner (@var) {
@@ -2398,9 +2398,9 @@ body {
     height: @a * 10;
 
     .innest {
-      width: @a;  
+      width: @a;
       .mix-inner(@a * 2);
-    }  
+    }
   }
 }
 
@@ -2408,100 +2408,100 @@ body {
   .mix(30);
 }
 .mixin () {
-    zero: 0;
+  zero: 0;
 }
 .mixin (@a: 1px) {
-    one: 1;
+  one: 1;
 }
 .mixin (@a) {
-    one-req: 1;
+  one-req: 1;
 }
 .mixin (@a: 1px, @b: 2px) {
-    two: 2;
+  two: 2;
 }
 
 .mixin (@a, @b, @c) {
-    three-req: 3;
+  three-req: 3;
 }
 
 .mixin (@a: 1px, @b: 2px, @c: 3px) {
-    three: 3;
+  three: 3;
 }
 
 .zero {
-    .mixin();
+  .mixin();
 }
 
 .one {
-    .mixin(1);
+  .mixin(1);
 }
 
 .two {
-    .mixin(1, 2);
+  .mixin(1, 2);
 }
 
 .three {
-    .mixin(1, 2, 3);
+  .mixin(1, 2, 3);
 }
 
 //
 
 .mixout ('left') {
-    left: 1;
+  left: 1;
 }
 
 .mixout ('right') {
-    right: 1;
+  right: 1;
 }
 
 .left {
-    .mixout('left');
+  .mixout('left');
 }
 .right {
-    .mixout('right');
+  .mixout('right');
 }
 
 //
 
 .border (@side, @width) {
-    color: black;
-    .border-side(@side, @width);
+  color: black;
+  .border-side(@side, @width);
 }
 .border-side (left, @w) {
-    border-left: @w;
+  border-left: @w;
 }
 .border-side (right, @w) {
-    border-right: @w;
+  border-right: @w;
 }
 
 .border-right {
-    .border(right, 4px);
+  .border(right, 4px);
 }
 .border-left {
-    .border(left, 4px);
+  .border(left, 4px);
 }
 
 //
 
 
 .border-radius (@r) {
-    both: @r * 10;
+  both: @r * 10;
 }
 .border-radius (@r, left) {
-    left: @r;
+  left: @r;
 }
 .border-radius (@r, right) {
-    right: @r;
+  right: @r;
 }
 
 .only-right {
-    .border-radius(33, right);
+  .border-radius(33, right);
 }
 .only-left {
-    .border-radius(33, left);
+  .border-radius(33, left);
 }
 .left-right {
-    .border-radius(33);
+  .border-radius(33);
 }
 .mixin { border: 1px solid black; }
 .mixout { border-color: orange; }
@@ -2679,12 +2679,12 @@ body {
     }
   }
 }h1, h2, h3 {
-  a, p {
-    &:hover {
-      color: red;
-    }
-  }
-}
+   a, p {
+     &:hover {
+       color: red;
+     }
+   }
+ }
 
 #all { color: blue; }
 #the { color: blue; }
@@ -2743,29 +2743,29 @@ td, input {
 }
 
 .redefinition {
-    @var: 4;
-    @var: 2;
-    @var: 3;
-    three: @var;
+  @var: 4;
+  @var: 2;
+  @var: 3;
+  three: @var;
 }
 
 .values {
-    @a: 'Trebuchet';
-    font-family: @a, @a, @a;
+  @a: 'Trebuchet';
+  font-family: @a, @a, @a;
 }
 
 
 .whitespace
-  { color: white; }  
-  
+{ color: white; }
+
 .whitespace
 {
   color: white;
 }
-  .whitespace
+.whitespace
 { color: white; }
 
-.whitespace{color:white;}  
+.whitespace{color:white;}
 .whitespace { color : white ; }
 
 .white,
@@ -2781,14 +2781,14 @@ td, input {
 .no-semi-column {border: 2px solid white}
 .newlines {
   background: the,
-              great,
-              wall;
+  great,
+  wall;
   border: 2px
-          solid
-          black;
+  solid
+  black;
 }
 .empty {
-  
+
 }
 #yelow {
   #short {
@@ -2873,11 +2873,11 @@ td, input {
   color: red; /* A C-style comment */
   background-color: orange; // A little comment
   font-size: 12px;
-  
+
   /* lost comment */ content: @var;
-  
+
   border: 1px solid black;
-  
+
   // padding & margin //
   padding: 0;
   margin: 2em;
@@ -2891,33 +2891,33 @@ td, input {
 
 #last { color: blue }
 //
-.comma-delimited { 
+.comma-delimited {
   background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
   text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
   -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
-    0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
+  0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
 }
 @font-face {
   font-family: Headline;
   src: local(Futura-Medium),
-       url(fonts.svg#MyGeometricModern) format("svg");
+  url(fonts.svg#MyGeometricModern) format("svg");
 }
 .other {
   -moz-transform: translate(0, 11em) rotate(-90deg);
 }
 p:not([class*="lead"]) {
-  color: black; 
+  color: black;
 }
 
 input[type="text"].class#id[attr=32]:not(1) {
-  color: white;
-}
+                                      color: white;
+                                    }
 
 div#id.class[a=1][b=2].class:not(1) {
-  color: white;
-}
+                        color: white;
+                      }
 
-ul.comma > li:not(:only-child)::after { 
+ul.comma > li:not(:only-child)::after {
   color: white;
 }
 
@@ -3014,7 +3014,7 @@ p + h1 {
 #more-shorthands {
   margin: 0;
   padding: 1px 0 2px 0;
-  font: normal small/20px 'Trebuchet MS', Verdana, sans-serif; 
+  font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
 }
 
 .misc {
@@ -3035,7 +3035,7 @@ p + h1 {
 
 #functions {
   @var: 10;
-  color: color("evil red"); // #660000
+  color: color("red");
   width: increment(15);
   height: undefined("self");
   border-width: add(2, 3);
@@ -3067,7 +3067,7 @@ p + h1 {
 }
 
 .mixina (@style, @width, @color: black) {
-    border: @width @style @color;
+  border: @width @style @color;
 }
 
 .mixiny
@@ -3127,11 +3127,11 @@ body {
 }
 
 .nested-ruleset (@width: 200px) {
-    width: @width;
-    .column { margin: @width; }
+  width: @width;
+  .column { margin: @width; }
 }
 .content {
-    .nested-ruleset(600px);
+  .nested-ruleset(600px);
 }
 
 //
@@ -3149,8 +3149,8 @@ body {
 //
 
 .var-inside () {
-    @var: 10px;
-    width: @var;
+  @var: 10px;
+  width: @var;
 }
 #var-inside { .var-inside; }
 .mix-inner (@var) {
@@ -3162,9 +3162,9 @@ body {
     height: @a * 10;
 
     .innest {
-      width: @a;  
+      width: @a;
       .mix-inner(@a * 2);
-    }  
+    }
   }
 }
 
@@ -3172,100 +3172,100 @@ body {
   .mix(30);
 }
 .mixin () {
-    zero: 0;
+  zero: 0;
 }
 .mixin (@a: 1px) {
-    one: 1;
+  one: 1;
 }
 .mixin (@a) {
-    one-req: 1;
+  one-req: 1;
 }
 .mixin (@a: 1px, @b: 2px) {
-    two: 2;
+  two: 2;
 }
 
 .mixin (@a, @b, @c) {
-    three-req: 3;
+  three-req: 3;
 }
 
 .mixin (@a: 1px, @b: 2px, @c: 3px) {
-    three: 3;
+  three: 3;
 }
 
 .zero {
-    .mixin();
+  .mixin();
 }
 
 .one {
-    .mixin(1);
+  .mixin(1);
 }
 
 .two {
-    .mixin(1, 2);
+  .mixin(1, 2);
 }
 
 .three {
-    .mixin(1, 2, 3);
+  .mixin(1, 2, 3);
 }
 
 //
 
 .mixout ('left') {
-    left: 1;
+  left: 1;
 }
 
 .mixout ('right') {
-    right: 1;
+  right: 1;
 }
 
 .left {
-    .mixout('left');
+  .mixout('left');
 }
 .right {
-    .mixout('right');
+  .mixout('right');
 }
 
 //
 
 .border (@side, @width) {
-    color: black;
-    .border-side(@side, @width);
+  color: black;
+  .border-side(@side, @width);
 }
 .border-side (left, @w) {
-    border-left: @w;
+  border-left: @w;
 }
 .border-side (right, @w) {
-    border-right: @w;
+  border-right: @w;
 }
 
 .border-right {
-    .border(right, 4px);
+  .border(right, 4px);
 }
 .border-left {
-    .border(left, 4px);
+  .border(left, 4px);
 }
 
 //
 
 
 .border-radius (@r) {
-    both: @r * 10;
+  both: @r * 10;
 }
 .border-radius (@r, left) {
-    left: @r;
+  left: @r;
 }
 .border-radius (@r, right) {
-    right: @r;
+  right: @r;
 }
 
 .only-right {
-    .border-radius(33, right);
+  .border-radius(33, right);
 }
 .only-left {
-    .border-radius(33, left);
+  .border-radius(33, left);
 }
 .left-right {
-    .border-radius(33);
+  .border-radius(33);
 }
 .mixin { border: 1px solid black; }
 .mixout { border-color: orange; }
@@ -3443,12 +3443,12 @@ body {
     }
   }
 }h1, h2, h3 {
-  a, p {
-    &:hover {
-      color: red;
-    }
-  }
-}
+   a, p {
+     &:hover {
+       color: red;
+     }
+   }
+ }
 
 #all { color: blue; }
 #the { color: blue; }
@@ -3507,29 +3507,29 @@ td, input {
 }
 
 .redefinition {
-    @var: 4;
-    @var: 2;
-    @var: 3;
-    three: @var;
+  @var: 4;
+  @var: 2;
+  @var: 3;
+  three: @var;
 }
 
 .values {
-    @a: 'Trebuchet';
-    font-family: @a, @a, @a;
+  @a: 'Trebuchet';
+  font-family: @a, @a, @a;
 }
 
 
 .whitespace
-  { color: white; }  
-  
+{ color: white; }
+
 .whitespace
 {
   color: white;
 }
-  .whitespace
+.whitespace
 { color: white; }
 
-.whitespace{color:white;}  
+.whitespace{color:white;}
 .whitespace { color : white ; }
 
 .white,
@@ -3545,14 +3545,14 @@ td, input {
 .no-semi-column {border: 2px solid white}
 .newlines {
   background: the,
-              great,
-              wall;
+  great,
+  wall;
   border: 2px
-          solid
-          black;
+  solid
+  black;
 }
 .empty {
-  
+
 }
 #yelow {
   #short {
@@ -3637,11 +3637,11 @@ td, input {
   color: red; /* A C-style comment */
   background-color: orange; // A little comment
   font-size: 12px;
-  
+
   /* lost comment */ content: @var;
-  
+
   border: 1px solid black;
-  
+
   // padding & margin //
   padding: 0;
   margin: 2em;
@@ -3655,33 +3655,33 @@ td, input {
 
 #last { color: blue }
 //
-.comma-delimited { 
+.comma-delimited {
   background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
   text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
   -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
-    0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
+  0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
 }
 @font-face {
   font-family: Headline;
   src: local(Futura-Medium),
-       url(fonts.svg#MyGeometricModern) format("svg");
+  url(fonts.svg#MyGeometricModern) format("svg");
 }
 .other {
   -moz-transform: translate(0, 11em) rotate(-90deg);
 }
 p:not([class*="lead"]) {
-  color: black; 
+  color: black;
 }
 
 input[type="text"].class#id[attr=32]:not(1) {
-  color: white;
-}
+                                      color: white;
+                                    }
 
 div#id.class[a=1][b=2].class:not(1) {
-  color: white;
-}
+                        color: white;
+                      }
 
-ul.comma > li:not(:only-child)::after { 
+ul.comma > li:not(:only-child)::after {
   color: white;
 }
 
@@ -3778,7 +3778,7 @@ p + h1 {
 #more-shorthands {
   margin: 0;
   padding: 1px 0 2px 0;
-  font: normal small/20px 'Trebuchet MS', Verdana, sans-serif; 
+  font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
 }
 
 .misc {
@@ -3799,7 +3799,7 @@ p + h1 {
 
 #functions {
   @var: 10;
-  color: color("evil red"); // #660000
+  color: color("red");
   width: increment(15);
   height: undefined("self");
   border-width: add(2, 3);
@@ -3831,7 +3831,7 @@ p + h1 {
 }
 
 .mixina (@style, @width, @color: black) {
-    border: @width @style @color;
+  border: @width @style @color;
 }
 
 .mixiny
@@ -3891,11 +3891,11 @@ body {
 }
 
 .nested-ruleset (@width: 200px) {
-    width: @width;
-    .column { margin: @width; }
+  width: @width;
+  .column { margin: @width; }
 }
 .content {
-    .nested-ruleset(600px);
+  .nested-ruleset(600px);
 }
 
 //
@@ -3913,8 +3913,8 @@ body {
 //
 
 .var-inside () {
-    @var: 10px;
-    width: @var;
+  @var: 10px;
+  width: @var;
 }
 #var-inside { .var-inside; }
 .mix-inner (@var) {
@@ -3926,9 +3926,9 @@ body {
     height: @a * 10;
 
     .innest {
-      width: @a;  
+      width: @a;
       .mix-inner(@a * 2);
-    }  
+    }
   }
 }
 
@@ -3936,44 +3936,44 @@ body {
   .mix(30);
 }
 .mixin () {
-    zero: 0;
+  zero: 0;
 }
 .mixin (@a: 1px) {
-    one: 1;
+  one: 1;
 }
 .mixin (@a) {
-    one-req: 1;
+  one-req: 1;
 }
 .mixin (@a: 1px, @b: 2px) {
-    two: 2;
+  two: 2;
 }
 
 .mixin (@a, @b, @c) {
-    three-req: 3;
+  three-req: 3;
 }
 
 .mixin (@a: 1px, @b: 2px, @c: 3px) {
-    three: 3;
+  three: 3;
 }
 
 .zero {
-    .mixin();
+  .mixin();
 }
 
 .one {
-    .mixin(1);
+  .mixin(1);
 }
 
 .two {
-    .mixin(1, 2);
+  .mixin(1, 2);
 }
 
 .three {
-    .mixin(1, 2, 3);
+  .mixin(1, 2, 3);
 }
 
 //
 
 .mixout ('left') {
-    left: 1;
-}
+  left: 1;
+}