less 2.4.0 → 2.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (265) hide show
  1. checksums.yaml +4 -4
  2. data/Changelog.md +4 -0
  3. data/Gemfile +1 -1
  4. data/less.gemspec +1 -1
  5. data/lib/less/defaults.rb +3 -3
  6. data/lib/less/java_script/v8_context.rb +1 -1
  7. data/lib/less/js/.gitattributes +3 -2
  8. data/lib/less/js/.gitignore +18 -2
  9. data/lib/less/js/.jshintrc +11 -0
  10. data/lib/less/js/CHANGELOG.md +87 -2
  11. data/lib/less/js/CONTRIBUTING.md +4 -3
  12. data/lib/less/js/Gruntfile.js +290 -0
  13. data/lib/less/js/README.md +342 -12
  14. data/lib/less/js/benchmark/benchmark.less +194 -194
  15. data/lib/less/js/benchmark/less-benchmark.js +9 -10
  16. data/lib/less/js/bin/lessc +154 -12
  17. data/lib/less/js/bower.json +18 -0
  18. data/lib/less/js/build.gradle +347 -0
  19. data/lib/less/js/build/README.md +350 -0
  20. data/lib/less/js/build/browser-header.js +4 -0
  21. data/lib/less/js/build/build.yml +160 -0
  22. data/lib/less/js/build/require-rhino.js +7 -2
  23. data/lib/less/js/build/rhino-header.js +4 -0
  24. data/lib/less/js/build/rhino-modules.js +131 -0
  25. data/lib/less/js/build/tasks/.gitkeep +1 -0
  26. data/lib/less/js/dist/less-1.5.0.js +6914 -0
  27. data/lib/less/js/dist/less-1.5.0.min.js +13 -0
  28. data/lib/less/js/dist/less-1.5.1.js +6941 -0
  29. data/lib/less/js/dist/less-1.5.1.min.js +13 -0
  30. data/lib/less/js/dist/less-1.6.0.js +7485 -0
  31. data/lib/less/js/dist/less-1.6.0.min.js +16 -0
  32. data/lib/less/js/dist/less-1.6.1.js +7513 -0
  33. data/lib/less/js/dist/less-1.6.1.min.js +16 -0
  34. data/lib/less/js/dist/less-1.6.2.js +7624 -0
  35. data/lib/less/js/dist/less-1.6.2.min.js +16 -0
  36. data/lib/less/js/dist/less-rhino-1.5.1.js +6831 -0
  37. data/lib/less/js/dist/less-rhino-1.6.2.js +9017 -0
  38. data/lib/less/js/dist/lessc-rhino-1.6.2.js +449 -0
  39. data/lib/less/js/gradle/wrapper/gradle-wrapper.jar +0 -0
  40. data/lib/less/js/gradle/wrapper/gradle-wrapper.properties +6 -0
  41. data/lib/less/js/gradlew +164 -0
  42. data/lib/less/js/gradlew.bat +90 -0
  43. data/lib/less/js/lib/less/browser.js +482 -367
  44. data/lib/less/js/lib/less/colors.js +0 -1
  45. data/lib/less/js/lib/less/encoder.js +4 -0
  46. data/lib/less/js/lib/less/env.js +50 -19
  47. data/lib/less/js/lib/less/extend-visitor.js +66 -41
  48. data/lib/less/js/lib/less/functions.js +309 -104
  49. data/lib/less/js/lib/less/import-visitor.js +21 -10
  50. data/lib/less/js/lib/less/index.js +90 -68
  51. data/lib/less/js/lib/less/join-selector-visitor.js +11 -4
  52. data/lib/less/js/lib/less/lessc_helper.js +56 -45
  53. data/lib/less/js/lib/less/parser.js +830 -460
  54. data/lib/less/js/lib/less/rhino.js +380 -58
  55. data/lib/less/js/lib/less/source-map-output.js +141 -0
  56. data/lib/less/js/lib/less/to-css-visitor.js +215 -0
  57. data/lib/less/js/lib/less/tree.js +57 -5
  58. data/lib/less/js/lib/less/tree/alpha.js +13 -5
  59. data/lib/less/js/lib/less/tree/anonymous.js +11 -5
  60. data/lib/less/js/lib/less/tree/assignment.js +11 -5
  61. data/lib/less/js/lib/less/tree/call.js +19 -8
  62. data/lib/less/js/lib/less/tree/color.js +59 -36
  63. data/lib/less/js/lib/less/tree/comment.js +17 -4
  64. data/lib/less/js/lib/less/tree/condition.js +3 -3
  65. data/lib/less/js/lib/less/tree/dimension.js +161 -153
  66. data/lib/less/js/lib/less/tree/directive.js +39 -18
  67. data/lib/less/js/lib/less/tree/element.js +41 -18
  68. data/lib/less/js/lib/less/tree/expression.js +11 -5
  69. data/lib/less/js/lib/less/tree/extend.js +11 -1
  70. data/lib/less/js/lib/less/tree/import.js +34 -20
  71. data/lib/less/js/lib/less/tree/javascript.js +16 -10
  72. data/lib/less/js/lib/less/tree/keyword.js +5 -2
  73. data/lib/less/js/lib/less/tree/media.js +39 -22
  74. data/lib/less/js/lib/less/tree/mixin.js +135 -56
  75. data/lib/less/js/lib/less/tree/negative.js +4 -2
  76. data/lib/less/js/lib/less/tree/operation.js +17 -12
  77. data/lib/less/js/lib/less/tree/paren.js +5 -2
  78. data/lib/less/js/lib/less/tree/quoted.js +9 -6
  79. data/lib/less/js/lib/less/tree/rule.js +39 -21
  80. data/lib/less/js/lib/less/tree/ruleset.js +229 -145
  81. data/lib/less/js/lib/less/tree/selector.js +101 -34
  82. data/lib/less/js/lib/less/tree/unicode-descriptor.js +4 -3
  83. data/lib/less/js/lib/less/tree/url.js +33 -11
  84. data/lib/less/js/lib/less/tree/value.js +13 -6
  85. data/lib/less/js/lib/less/tree/variable.js +13 -8
  86. data/lib/less/js/lib/less/visitor.js +117 -25
  87. data/lib/less/js/lib/source-map/source-map-0.1.31.js +1933 -0
  88. data/lib/less/js/lib/source-map/source-map-footer.js +4 -0
  89. data/lib/less/js/lib/source-map/source-map-header.js +3 -0
  90. data/lib/less/js/package.json +30 -15
  91. data/lib/less/js/test/browser/common.js +131 -56
  92. data/lib/less/js/test/browser/css/global-vars/simple.css +3 -0
  93. data/lib/less/js/test/browser/css/modify-vars/simple.css +8 -0
  94. data/lib/less/js/test/browser/css/relative-urls/urls.css +8 -9
  95. data/lib/less/js/test/browser/css/rootpath-relative/urls.css +0 -1
  96. data/lib/less/js/test/browser/css/rootpath/urls.css +0 -1
  97. data/lib/less/js/test/browser/css/urls.css +18 -14
  98. data/lib/less/js/test/browser/es5.js +27 -0
  99. data/lib/less/js/test/{less/errors/color-operation-error.less → browser/less/console-errors/test-error.less} +0 -0
  100. data/lib/less/js/test/browser/less/console-errors/test-error.txt +2 -0
  101. data/lib/less/js/test/browser/less/global-vars/simple.less +3 -0
  102. data/lib/less/js/test/browser/less/modify-vars/imports/simple2.less +4 -0
  103. data/lib/less/js/test/browser/less/modify-vars/simple.less +8 -0
  104. data/lib/less/js/test/browser/less/relative-urls/urls.less +1 -1
  105. data/lib/less/js/test/browser/less/rootpath-relative/urls.less +1 -1
  106. data/lib/less/js/test/browser/less/rootpath/urls.less +1 -1
  107. data/lib/less/js/test/browser/less/urls.less +9 -1
  108. data/lib/less/js/test/browser/phantom-runner.js +112 -103
  109. data/lib/less/js/test/browser/runner-browser-options.js +42 -0
  110. data/lib/less/js/test/browser/{runner-browser.js → runner-browser-spec.js} +7 -2
  111. data/lib/less/js/test/browser/runner-console-errors.js +5 -0
  112. data/lib/less/js/test/browser/runner-errors-options.js +5 -0
  113. data/lib/less/js/test/browser/runner-errors-spec.js +4 -0
  114. data/lib/less/js/test/browser/runner-global-vars-options.js +4 -0
  115. data/lib/less/js/test/browser/runner-global-vars-spec.js +3 -0
  116. data/lib/less/js/test/browser/runner-legacy-options.js +4 -0
  117. data/lib/less/js/test/browser/{runner-legacy.js → runner-legacy-spec.js} +1 -4
  118. data/lib/less/js/test/browser/runner-main-options.js +15 -0
  119. data/lib/less/js/test/browser/runner-main-spec.js +3 -0
  120. data/lib/less/js/test/browser/runner-modify-vars-options.js +2 -0
  121. data/lib/less/js/test/browser/runner-modify-vars-spec.js +43 -0
  122. data/lib/less/js/test/browser/runner-no-js-errors-options.js +4 -0
  123. data/lib/less/js/test/browser/runner-no-js-errors-spec.js +4 -0
  124. data/lib/less/js/test/browser/runner-production-options.js +3 -0
  125. data/lib/less/js/test/browser/{runner-production.js → runner-production-spec.js} +1 -3
  126. data/lib/less/js/test/browser/runner-relative-urls-options.js +3 -0
  127. data/lib/less/js/test/browser/{runner-relative-urls.js → runner-relative-urls-spec.js} +1 -2
  128. data/lib/less/js/test/browser/runner-rootpath-options.js +3 -0
  129. data/lib/less/js/test/browser/runner-rootpath-relative-options.js +4 -0
  130. data/lib/less/js/test/browser/{runner-rootpath-relative.js → runner-rootpath-relative-spec.js} +1 -3
  131. data/lib/less/js/test/browser/{runner-rootpath.js → runner-rootpath-spec.js} +1 -2
  132. data/lib/less/js/test/browser/test-runner-template.tmpl +47 -0
  133. data/lib/less/js/test/css/colors.css +7 -0
  134. data/lib/less/js/test/css/comments.css +9 -4
  135. data/lib/less/js/test/css/compression/compression.css +3 -2
  136. data/lib/less/js/test/css/css-3.css +17 -5
  137. data/lib/less/js/test/css/css-guards.css +37 -0
  138. data/lib/less/js/test/css/debug/linenumbers-all.css +6 -0
  139. data/lib/less/js/test/css/debug/linenumbers-comments.css +5 -0
  140. data/lib/less/js/test/css/debug/linenumbers-mediaquery.css +5 -0
  141. data/lib/less/js/test/css/empty.css +0 -0
  142. data/lib/less/js/test/css/extend-chaining.css +9 -0
  143. data/lib/less/js/test/css/extend-selector.css +10 -2
  144. data/lib/less/js/test/css/extract-and-length.css +133 -0
  145. data/lib/less/js/test/css/functions.css +23 -10
  146. data/lib/less/js/test/css/globalVars/extended.css +12 -0
  147. data/lib/less/js/test/css/globalVars/simple.css +6 -0
  148. data/lib/less/js/test/css/import-inline.css +5 -0
  149. data/lib/less/js/test/css/import-once.css +12 -0
  150. data/lib/less/js/test/css/import-reference.css +49 -0
  151. data/lib/less/js/test/css/import.css +0 -2
  152. data/lib/less/js/test/css/media.css +21 -5
  153. data/lib/less/js/test/css/merge.css +26 -0
  154. data/lib/less/js/test/css/mixins-guards-default-func.css +129 -0
  155. data/lib/less/js/test/css/mixins-guards.css +6 -0
  156. data/lib/less/js/test/css/mixins-important.css +7 -0
  157. data/lib/less/js/test/css/mixins-interpolated.css +39 -0
  158. data/lib/less/js/test/css/mixins.css +20 -0
  159. data/lib/less/js/test/css/modifyVars/extended.css +9 -0
  160. data/lib/less/js/test/css/no-output.css +0 -0
  161. data/lib/less/js/test/css/parens.css +3 -0
  162. data/lib/less/js/test/css/property-name-interp.css +20 -0
  163. data/lib/less/js/test/css/selectors.css +12 -0
  164. data/lib/less/js/test/css/static-urls/urls.css +7 -4
  165. data/lib/less/js/test/css/strings.css +3 -0
  166. data/lib/less/js/test/css/url-args/urls.css +56 -0
  167. data/lib/less/js/test/css/urls.css +21 -9
  168. data/lib/less/js/test/index.js +45 -0
  169. data/lib/less/js/test/less-test.js +234 -191
  170. data/lib/less/js/test/less/colors.less +6 -0
  171. data/lib/less/js/test/less/comments.less +7 -1
  172. data/lib/less/js/test/less/compression/compression.less +21 -1
  173. data/lib/less/js/test/less/css-3.less +12 -0
  174. data/lib/less/js/test/less/css-guards.less +99 -0
  175. data/lib/less/js/test/less/debug/linenumbers.less +11 -1
  176. data/lib/less/js/test/less/empty.less +0 -0
  177. data/lib/less/js/test/less/errors/add-mixed-units.txt +4 -2
  178. data/lib/less/js/test/less/errors/add-mixed-units2.txt +4 -2
  179. data/lib/less/js/test/less/errors/color-func-invalid-color.less +3 -0
  180. data/lib/less/js/test/less/errors/color-func-invalid-color.txt +4 -0
  181. data/lib/less/js/test/less/errors/css-guard-default-func.less +4 -0
  182. data/lib/less/js/test/less/errors/css-guard-default-func.txt +4 -0
  183. data/lib/less/js/test/less/errors/import-subfolder2.txt +4 -2
  184. data/lib/less/js/test/less/errors/javascript-undefined-var.less +3 -0
  185. data/lib/less/js/test/less/errors/javascript-undefined-var.txt +4 -0
  186. data/lib/less/js/test/less/errors/mixins-guards-default-func-1.less +9 -0
  187. data/lib/less/js/test/less/errors/mixins-guards-default-func-1.txt +4 -0
  188. data/lib/less/js/test/less/errors/mixins-guards-default-func-2.less +9 -0
  189. data/lib/less/js/test/less/errors/mixins-guards-default-func-2.txt +4 -0
  190. data/lib/less/js/test/less/errors/mixins-guards-default-func-3.less +9 -0
  191. data/lib/less/js/test/less/errors/mixins-guards-default-func-3.txt +4 -0
  192. data/lib/less/js/test/less/errors/multiple-guards-on-css-selectors.less +4 -0
  193. data/lib/less/js/test/less/errors/multiple-guards-on-css-selectors.txt +4 -0
  194. data/lib/less/js/test/less/errors/multiple-guards-on-css-selectors2.less +4 -0
  195. data/lib/less/js/test/less/errors/multiple-guards-on-css-selectors2.txt +4 -0
  196. data/lib/less/js/test/less/errors/parse-error-curly-bracket.less +4 -1
  197. data/lib/less/js/test/less/errors/parse-error-curly-bracket.txt +4 -2
  198. data/lib/less/js/test/less/errors/parse-error-extra-parens.less +5 -0
  199. data/lib/less/js/test/less/errors/parse-error-extra-parens.txt +3 -0
  200. data/lib/less/js/test/less/errors/parse-error-missing-bracket.txt +2 -2
  201. data/lib/less/js/test/less/errors/parse-error-missing-parens.less +5 -0
  202. data/lib/less/js/test/less/errors/parse-error-missing-parens.txt +3 -0
  203. data/lib/less/js/test/less/errors/property-asterisk-only-name.less +3 -0
  204. data/lib/less/js/test/less/errors/property-asterisk-only-name.txt +4 -0
  205. data/lib/less/js/test/less/errors/property-interp-not-defined.less +1 -0
  206. data/lib/less/js/test/less/errors/property-interp-not-defined.txt +2 -0
  207. data/lib/less/js/test/less/errors/svg-gradient1.less +3 -0
  208. data/lib/less/js/test/less/errors/svg-gradient1.txt +4 -0
  209. data/lib/less/js/test/less/errors/svg-gradient2.less +3 -0
  210. data/lib/less/js/test/less/errors/svg-gradient2.txt +4 -0
  211. data/lib/less/js/test/less/errors/svg-gradient3.less +3 -0
  212. data/lib/less/js/test/less/errors/svg-gradient3.txt +4 -0
  213. data/lib/less/js/test/less/errors/unit-function.less +3 -0
  214. data/lib/less/js/test/less/errors/unit-function.txt +4 -0
  215. data/lib/less/js/test/less/extend-chaining.less +12 -0
  216. data/lib/less/js/test/less/extend-selector.less +15 -0
  217. data/lib/less/js/test/less/extract-and-length.less +133 -0
  218. data/lib/less/js/test/less/functions.less +15 -2
  219. data/lib/less/js/test/less/globalVars/extended.json +5 -0
  220. data/lib/less/js/test/less/globalVars/extended.less +10 -0
  221. data/lib/less/js/test/less/globalVars/simple.json +3 -0
  222. data/lib/less/js/test/less/globalVars/simple.less +3 -0
  223. data/lib/less/js/test/less/import-inline.less +2 -0
  224. data/lib/less/js/test/less/import-once.less +2 -0
  225. data/lib/less/js/test/less/import-reference.less +18 -0
  226. data/lib/less/js/test/less/import/import-and-relative-paths-test.less +11 -0
  227. data/lib/less/js/test/less/import/import-reference.less +43 -0
  228. data/lib/less/js/test/less/import/import-test-f.less +5 -0
  229. data/lib/less/js/test/less/import/invalid-css.less +1 -0
  230. data/lib/less/js/test/less/media.less +25 -1
  231. data/lib/less/js/test/less/merge.less +59 -0
  232. data/lib/less/js/test/less/mixins-args.less +10 -0
  233. data/lib/less/js/test/less/mixins-guards-default-func.less +195 -0
  234. data/lib/less/js/test/less/mixins-guards.less +16 -0
  235. data/lib/less/js/test/less/mixins-important.less +4 -1
  236. data/lib/less/js/test/less/mixins-interpolated.less +69 -0
  237. data/lib/less/js/test/less/mixins.less +27 -0
  238. data/lib/less/js/test/less/modifyVars/extended.json +5 -0
  239. data/lib/less/js/test/less/modifyVars/extended.less +11 -0
  240. data/lib/less/js/test/less/no-js-errors/no-js-errors.less +3 -0
  241. data/lib/less/js/test/less/no-js-errors/no-js-errors.txt +4 -0
  242. data/lib/less/js/test/less/no-output.less +2 -0
  243. data/lib/less/js/test/less/parens.less +4 -0
  244. data/lib/less/js/test/less/property-name-interp.less +53 -0
  245. data/lib/less/js/test/less/selectors.less +13 -0
  246. data/lib/less/js/test/less/sourcemaps/basic.json +3 -0
  247. data/lib/less/js/test/less/sourcemaps/basic.less +27 -0
  248. data/lib/less/js/test/less/sourcemaps/imported.css +7 -0
  249. data/lib/less/js/test/less/strings.less +6 -0
  250. data/lib/less/js/test/less/url-args/urls.less +63 -0
  251. data/lib/less/js/test/less/urls.less +15 -0
  252. data/lib/less/js/test/rhino/test-header.js +15 -0
  253. data/lib/less/js/test/sourcemaps/basic.json +1 -0
  254. data/lib/less/js/test/sourcemaps/index.html +17 -0
  255. data/lib/less/loader.rb +48 -40
  256. data/lib/less/version.rb +1 -1
  257. data/spec/less/parser_spec.rb +15 -15
  258. metadata +146 -40
  259. data/lib/less/js/Makefile +0 -102
  260. data/lib/less/js/build/header.js +0 -9
  261. data/lib/less/js/test/browser-test-prepare.js +0 -46
  262. data/lib/less/js/test/browser/runner-errors.js +0 -5
  263. data/lib/less/js/test/browser/runner-main.js +0 -15
  264. data/lib/less/js/test/browser/template.htm +0 -10
  265. data/lib/less/js/test/less/errors/color-operation-error.txt +0 -2
@@ -1,20 +1,350 @@
1
- less.js
2
- =======
1
+ # [Less.js v1.6.2](http://lesscss.org)
3
2
 
4
- The **dynamic** stylesheet language.
3
+ > The **dynamic** stylesheet language. [http://lesscss.org](http://lesscss.org).
5
4
 
6
- <http://lesscss.org>
5
+ This is the JavaScript, and now official, stable version of LESS.
7
6
 
8
- about
9
- -----
10
7
 
11
- This is the JavaScript, and now official, stable version of LESS.
8
+ ## Getting Started
9
+
10
+ Options for adding Less.js to your project:
11
+
12
+ * Install with [NPM](https://npmjs.org/): `npm install less`
13
+ * [Download the latest release][download]
14
+ * Clone the repo: `git clone git://github.com/less/less.js.git`
15
+
16
+
17
+
18
+ ## Feature Highlights
19
+ LESS extends CSS with dynamic features such as:
20
+
21
+ * [nesting](#nesting)
22
+ * [variables](#variables)
23
+ * [operations](#operations)
24
+ * [mixins](#mixins)
25
+ * [extend](#extend) (selector inheritance)
26
+
27
+ 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]
28
+
29
+
30
+ ### Examples
31
+ #### nesting
32
+ Take advantage of nesting to make code more readable and maintainable. This:
33
+
34
+ ```less
35
+ .nav > li > a {
36
+ border: 1px solid #f5f5f5;
37
+ &:hover {
38
+ border-color: #ddd;
39
+ }
40
+ }
41
+ ```
42
+
43
+ renders to:
44
+
45
+ ```css
46
+ .nav > li > a {
47
+ border: 1px solid #f5f5f5;
48
+ }
49
+ .nav > li > a:hover {
50
+ border-color: #ddd;
51
+ }
52
+ ```
53
+
54
+
55
+ #### variables
56
+ Updated commonly used values from a single location.
57
+
58
+ ```less
59
+ // Variables ("inline" comments like this can be used)
60
+ @link-color: #428bca; // appears as "sea blue"
61
+
62
+ /* Or "block comments" that span
63
+ multiple lines, like this */
64
+ a {
65
+ color: @link-color; // use the variable in styles
66
+ }
67
+ ```
68
+
69
+ Variables can also be used in `@import` statements, URLs, selector names, and more.
70
+
71
+
72
+
73
+ #### operations
74
+ 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:
75
+
76
+ ```less
77
+ // Variables
78
+ @link-color: #428bca;
79
+ @link-color-hover: darken(@link-color, 10%);
80
+
81
+ // Styles
82
+ a {
83
+ color: @link-color;
84
+ }
85
+ a:hover {
86
+ color: @link-color-hover;
87
+ }
88
+ ```
89
+ renders to:
90
+
91
+ ```css
92
+ a {
93
+ color: #428bca;
94
+ }
95
+ a:hover {
96
+ color: #3071a9;
97
+ }
98
+ ```
99
+
100
+ #### mixins
101
+ ##### "implicit" mixins
102
+ Mixins enable you to apply the styles of one selector inside another selector like this:
103
+
104
+ ```less
105
+ // Variables
106
+ @link-color: #428bca;
107
+
108
+ // Any "regular" class...
109
+ .link {
110
+ color: @link-color;
111
+ }
112
+ a {
113
+ font-weight: bold;
114
+ .link; // ...can be used as an "implicit" mixin
115
+ }
116
+ ```
117
+
118
+ renders to:
119
+
120
+ ```css
121
+ .link {
122
+ color: #428bca;
123
+ }
124
+ a {
125
+ font-weight: bold;
126
+ color: #428bca;
127
+ }
128
+ ```
129
+
130
+ So any selector can be an "implicit mixin". We'll show you a DRYer way to do this below.
131
+
132
+
133
+
134
+ ##### parametric mixins
135
+ Mixins can also accept parameters:
136
+
137
+ ```less
138
+ // Transition mixin
139
+ .transition(@transition) {
140
+ -webkit-transition: @transition;
141
+ -moz-transition: @transition;
142
+ -o-transition: @transition;
143
+ transition: @transition;
144
+ }
145
+ ```
146
+
147
+ used like this:
148
+
149
+ ```less
150
+ // Variables
151
+ @link-color: #428bca;
152
+ @link-color-hover: darken(@link-color, 10%);
153
+
154
+ //Transition mixin would be anywhere here
155
+
156
+ a {
157
+ font-weight: bold;
158
+ color: @link-color;
159
+ .transition(color .2s ease-in-out);
160
+ // Hover state
161
+ &:hover {
162
+ color: @link-color-hover;
163
+ }
164
+ }
165
+ ```
166
+
167
+ renders to:
168
+
169
+ ```css
170
+ a {
171
+ font-weight: bold;
172
+ color: #428bca;
173
+ -webkit-transition: color 0.2s ease-in-out;
174
+ -moz-transition: color 0.2s ease-in-out;
175
+ -o-transition: color 0.2s ease-in-out;
176
+ transition: color 0.2s ease-in-out;
177
+ }
178
+ a:hover {
179
+ color: #3071a9;
180
+ }
181
+ ```
182
+
183
+
184
+ #### extend
185
+ 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:
186
+
187
+ ```less
188
+ // Variables
189
+ @link-color: #428bca;
190
+
191
+ .link {
192
+ color: @link-color;
193
+ }
194
+ a:extend(.link) {
195
+ font-weight: bold;
196
+ }
197
+ // Can also be written as
198
+ a {
199
+ &:extend(.link);
200
+ font-weight: bold;
201
+ }
202
+ ```
203
+
204
+ renders to:
205
+
206
+ ```css
207
+ .link, a {
208
+ color: #428bca;
209
+ }
210
+ a {
211
+ font-weight: bold;
212
+ }
213
+ ```
214
+
215
+ ## Usage
216
+
217
+ ### Compiling and Parsing
218
+ Invoke the compiler from node:
219
+
220
+ ```javascript
221
+ var less = require('less');
222
+
223
+ less.render('.class { width: (1 + 1) }', function (e, css) {
224
+ console.log(css);
225
+ });
226
+ ```
227
+
228
+ Outputs:
229
+
230
+ ```css
231
+ .class {
232
+ width: 2;
233
+ }
234
+ ```
235
+
236
+ You may also manually invoke the parser and compiler:
237
+
238
+ ```javascript
239
+ var parser = new(less.Parser);
240
+
241
+ parser.parse('.class { width: (1 + 1) }', function (err, tree) {
242
+ if (err) { return console.error(err) }
243
+ console.log(tree.toCSS());
244
+ });
245
+ ```
246
+
247
+
248
+ ### Configuration
249
+ You may also pass options to the compiler:
250
+
251
+ ```javascript
252
+ var parser = new(less.Parser)({
253
+ paths: ['.', './src/less'], // Specify search paths for @import directives
254
+ filename: 'style.less' // Specify a filename, for better error messages
255
+ });
256
+
257
+ parser.parse('.class { width: (1 + 1) }', function (e, tree) {
258
+ tree.toCSS({ compress: true }); // Minify CSS output
259
+ });
260
+ ```
261
+
262
+ ## More information
263
+
264
+ For general information on the language, configuration options or usage visit [lesscss.org](http://lesscss.org) or [the less wiki][wiki].
265
+
266
+ Here are other resources for using Less.js:
267
+
268
+ * [stackoverflow.com][so] is a great place to get answers about Less.
269
+ * [node.js tools](https://github.com/less/less.js/wiki/Converting-LESS-to-CSS) for converting Less to CSS
270
+ * [GUI compilers for Less](https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js)
271
+ * [Less.js Issues][issues] for reporting bugs
272
+
273
+
274
+
275
+ ## Contributing
276
+ 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/).
277
+
278
+ ### Reporting Issues
279
+
280
+ 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].
281
+
282
+ Please report documentation issues in [the documentation project](https://github.com/less/less-docs).
283
+
284
+ ### Development
285
+
286
+ #### Install Less.js
287
+
288
+ Start by either [downloading this project][download] manually, or in the command line:
289
+
290
+ ```shell
291
+ git clone https://github.com/less/less.js.git "less"
292
+ ```
293
+ and then `cd less`.
294
+
295
+
296
+ #### Install dependencies
297
+
298
+ To install all the dependencies for less development, run:
299
+
300
+ ```shell
301
+ npm install
302
+ ```
303
+
304
+ If you haven't run grunt before, install grunt-cli globally so you can just run `grunt`
305
+
306
+ ```shell
307
+ npm install grunt-cli -g
308
+ ```
309
+
310
+ You should now be able to build Less.js, run tests, benchmarking, and other tasks listed in the Gruntfile.
311
+
312
+ ## Using Less.js Grunt
313
+
314
+ 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.
315
+
316
+ The Less.js [Gruntfile](Gruntfile.js) is configured with the following "convenience tasks" :
317
+
318
+ #### test - `grunt`
319
+ 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.
320
+
321
+ #### test - `grunt benchmark`
322
+ Runs the benchmark suite.
323
+
324
+ #### build for testing browser - 'grunt browser'
325
+ This builds less.js and puts it in 'test/browser/less.js'
326
+
327
+ #### build - `grunt stable | grunt beta | grunt alpha`
328
+ 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.
329
+
330
+ #### readme - `grunt readme`
331
+ Build the README file from [a template](build/README.md) to ensure that metadata is up-to-date and (more likely to be) correct.
332
+
333
+ Please review the [Gruntfile](Gruntfile.js) to become acquainted with the other available tasks.
334
+
335
+ **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.
336
+
337
+
338
+ ## Release History
339
+ See the [changelog](CHANGELOG.md)
12
340
 
13
- 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)
341
+ ## [License](LICENSE)
14
342
 
15
- license
16
- -------
343
+ Copyright (c) 2009-2014 [Alexis Sellier](http://cloudhead.io/) & The Core Less Team
344
+ Licensed under the [Apache License](LICENSE).
17
345
 
18
- See `LICENSE` file.
19
346
 
20
- > Copyright (c) 2009-2013 Alexis Sellier & The Core Less Team
347
+ [so]: http://stackoverflow.com/questions/tagged/twitter-bootstrap+less "StackOverflow.com"
348
+ [issues]: https://github.com/less/less.js/issues "GitHub Issues for Less.js"
349
+ [wiki]: https://github.com/less/less.js/wiki "The official wiki for Less.js"
350
+ [download]: https://github.com/less/less.js/zipball/master "Download Less.js"
@@ -203,7 +203,7 @@ div.browse {
203
203
  }
204
204
  li.paginate.previous a div b { border-right: 15px solid @white; border-left: none; left: 12px; }
205
205
  li.paginate.next a div b { border-left: 15px solid @white; border-right: none; left: 16px; }
206
- }
206
+ }
207
207
  > div.footer {
208
208
  padding: 9px 10px 10px; background: @light_grey * 0.75 + @white * 0.25; overflow: hidden;
209
209
  border-top: 1px solid @light_grey; .border_radius_bottom(3);
@@ -231,7 +231,7 @@ div.browse.with_options > ul { .border_radius_top(0); }
231
231
  div.browse.with_footer > ul { .border_radius_bottom(0); }
232
232
  /* Browse List */
233
233
  div.browse.list {
234
- > ul {
234
+ > ul {
235
235
  margin: 0; min-height: 320px;
236
236
  padding: 10px 0 0 10px; overflow: hidden;
237
237
  > li {
@@ -347,7 +347,7 @@ div.browse.brands.list {
347
347
  }
348
348
  .all a { font-weight: bold; }
349
349
  .current a {
350
- background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg;
350
+ background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg;
351
351
  padding-left: 10px;
352
352
  }
353
353
  }
@@ -437,7 +437,7 @@ div.voted {
437
437
  a.up {
438
438
  float: left; background: @colour_positive * 0.66 + @bg * 0.15; .border_radius_left(3);
439
439
  :hover { background: @colour_positive * 0.85 + @bg * 0.15; }
440
- }
440
+ }
441
441
  a.down {
442
442
  float: left; background: @colour_negative * 0.66 + @bg * 0.15; .border_radius_right(3);
443
443
  margin: 0 5px 0 1px;
@@ -460,7 +460,7 @@ div.panel {
460
460
  margin: 0 0 20px; position: relative; .box_shadow(0, 0, 3, @light_grey * 0.66 + @white * 0.33); .border_radius(3);
461
461
  > div.header {
462
462
  background: @bg url('/images/panel_header_bg.png') repeat-x top left; border-bottom: 1px solid (@bg * 0.66 + @black * 0.33);
463
- padding: 5px 10px 4px; .border_radius_top(3); min-height: 18px;
463
+ padding: 5px 10px 4px; .border_radius_top(3); min-height: 18px;
464
464
  h2 { font-size: 16px; margin: 0; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
465
465
  h3 { color: @white; font-size: 14px; margin: 0; line-height: 18px; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
466
466
  small { display: block; font-size: 12px; color: @light_grey * 0.25 + @white * 0.75; }
@@ -603,7 +603,7 @@ ul.people.list {
603
603
  margin: 0 0 10px; padding: 0 0 10px; overflow: hidden; float: none; width: auto; .border_radius(0);
604
604
  border: none; border-bottom: 1px solid (@light_grey * 0.33 + @white * 0.66);
605
605
  span.points {
606
- float: right; display: block; padding: 5px; background: @light_grey * 0.15 + @white * 0.85; line-height: 1;
606
+ float: right; display: block; padding: 5px; background: @light_grey * 0.15 + @white * 0.85; line-height: 1;
607
607
  text-align: center; width: 50px; height: 30px; .border_radius(3); margin: 0 0 0 10px;
608
608
  strong { display: block; color: @black; font-size: 16px; margin: 2px 0 0; }
609
609
  label { color: @grey; text-transform: uppercase; font-size: 10px; }
@@ -743,7 +743,7 @@ ul.people.tiled {
743
743
  height: 0; float: right; display: none;
744
744
  }
745
745
  span {
746
- .border_radius(3); background: @bg; display: block;
746
+ .border_radius(3); background: @bg; display: block;
747
747
  line-height: 30px; padding: 0 10px; font-size: 14px; font-weight: bold; margin: 0 10px 0 0;
748
748
  }
749
749
  }
@@ -798,7 +798,7 @@ ul.people.tiled {
798
798
  img { vertical-align: middle; float: left; }
799
799
  .name { font-weight: bold; font-size: 14px; display: block; margin: -2px 0 0 42px; }
800
800
  small {
801
- font-size: 12px; color: @grey; display: block; margin-left: 42px;
801
+ font-size: 12px; color: @grey; display: block; margin-left: 42px;
802
802
  strong { color: @black; font-weight: normal; }
803
803
  }
804
804
  :hover {
@@ -910,7 +910,7 @@ div.blank {
910
910
  }
911
911
 
912
912
  div.blank.small {
913
- padding: 10px 20px;
913
+ padding: 10px 20px;
914
914
  h4 { font-weight: normal; font-size: 16px; }
915
915
  p { margin: 0; }
916
916
  }
@@ -942,7 +942,7 @@ div.panel {
942
942
  div.content.browse {
943
943
  padding: 0; margin: 0;
944
944
  > ul {
945
- min-height: 0; .border_radius(0);
945
+ min-height: 0; .border_radius(0);
946
946
  > li {
947
947
  div.thumbnail {
948
948
  a.thumbnail { padding: 5px; }
@@ -957,7 +957,7 @@ div.panel {
957
957
 
958
958
  div.content.browse.ads > ul > li {
959
959
  width: 93px;
960
- > div.thumbnail a.thumbnail { width: 83px; height: 62px; }
960
+ > div.thumbnail a.thumbnail { width: 83px; height: 62px; }
961
961
  }
962
962
  div.content.browse.brands {
963
963
  .border_radius(3);
@@ -1196,7 +1196,7 @@ label.list_number.large {
1196
1196
  span { display: block; margin: 0 0 0 130px; }
1197
1197
  }
1198
1198
  p:last-child { margin: 0; }
1199
-
1199
+
1200
1200
  }
1201
1201
  }
1202
1202
  div.login {
@@ -1268,7 +1268,7 @@ label.list_number.large {
1268
1268
  b.voted.against { background: @colour_negative * 0.33 + @white * 0.66; }
1269
1269
  }
1270
1270
  /* Temporarily removed avatar and symbol */
1271
- /* div.symbols a.agent, b { display: none; }*/
1271
+ /* div.symbols a.agent, b { display: none; }*/
1272
1272
  div.description {
1273
1273
  font-size: 12px; color: @grey;
1274
1274
  a.agent { font-weight: bold; }
@@ -1293,11 +1293,11 @@ label.list_number.large {
1293
1293
  }
1294
1294
  li.new_comment.ad, li.endorsed.ad, li.voted {
1295
1295
  div.description, div.content { margin-left: 106px; }
1296
- /* div.description, div.content { margin-left: 53px; }*/
1296
+ /* div.description, div.content { margin-left: 53px; }*/
1297
1297
  }
1298
1298
  li.new_comment.brand, li.replied_to, li.endorsed.brand, li.connected, li.sn_setup {
1299
1299
  div.description, div.content { margin-left: 96px; }
1300
- /* div.description, div.content { margin-left: 43px; }*/
1300
+ /* div.description, div.content { margin-left: 43px; }*/
1301
1301
  }
1302
1302
  li.replied_to {
1303
1303
  div.content {
@@ -1530,7 +1530,7 @@ div.browse {
1530
1530
  }
1531
1531
  li.paginate.previous a div b { border-right: 15px solid @white; border-left: none; left: 12px; }
1532
1532
  li.paginate.next a div b { border-left: 15px solid @white; border-right: none; left: 16px; }
1533
- }
1533
+ }
1534
1534
  > div.footer {
1535
1535
  padding: 9px 10px 10px; background: @light_grey * 0.75 + @white * 0.25; overflow: hidden;
1536
1536
  border-top: 1px solid @light_grey; .border_radius_bottom(3);
@@ -1558,7 +1558,7 @@ div.browse.with_options > ul { .border_radius_top(0); }
1558
1558
  div.browse.with_footer > ul { .border_radius_bottom(0); }
1559
1559
  /* Browse List */
1560
1560
  div.browse.list {
1561
- > ul {
1561
+ > ul {
1562
1562
  margin: 0; min-height: 320px;
1563
1563
  padding: 10px 0 0 10px; overflow: hidden;
1564
1564
  > li {
@@ -1674,7 +1674,7 @@ div.browse.brands.list {
1674
1674
  }
1675
1675
  .all a { font-weight: bold; }
1676
1676
  .current a {
1677
- background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg;
1677
+ background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg;
1678
1678
  padding-left: 10px;
1679
1679
  }
1680
1680
  }
@@ -1764,7 +1764,7 @@ div.voted {
1764
1764
  a.up {
1765
1765
  float: left; background: @colour_positive * 0.66 + @bg * 0.15; .border_radius_left(3);
1766
1766
  :hover { background: @colour_positive * 0.85 + @bg * 0.15; }
1767
- }
1767
+ }
1768
1768
  a.down {
1769
1769
  float: left; background: @colour_negative * 0.66 + @bg * 0.15; .border_radius_right(3);
1770
1770
  margin: 0 5px 0 1px;
@@ -1833,7 +1833,7 @@ div.voted {
1833
1833
  height: 0; float: right; display: none;
1834
1834
  }
1835
1835
  span {
1836
- .border_radius(3); background: @bg; display: block;
1836
+ .border_radius(3); background: @bg; display: block;
1837
1837
  line-height: 30px; padding: 0 10px; font-size: 14px; font-weight: bold; margin: 0 10px 0 0;
1838
1838
  }
1839
1839
  }
@@ -1888,7 +1888,7 @@ div.voted {
1888
1888
  img { vertical-align: middle; float: left; }
1889
1889
  .name { font-weight: bold; font-size: 14px; display: block; margin: -2px 0 0 42px; }
1890
1890
  small {
1891
- font-size: 12px; color: @grey; display: block; margin-left: 42px;
1891
+ font-size: 12px; color: @grey; display: block; margin-left: 42px;
1892
1892
  strong { color: @black; font-weight: normal; }
1893
1893
  }
1894
1894
  :hover {
@@ -2000,7 +2000,7 @@ div.blank {
2000
2000
  }
2001
2001
 
2002
2002
  div.blank.small {
2003
- padding: 10px 20px;
2003
+ padding: 10px 20px;
2004
2004
  h4 { font-weight: normal; font-size: 16px; }
2005
2005
  p { margin: 0; }
2006
2006
  }
@@ -2109,11 +2109,11 @@ div.panel {
2109
2109
  color: red; /* A C-style comment */
2110
2110
  background-color: orange; // A little comment
2111
2111
  font-size: 12px;
2112
-
2112
+
2113
2113
  /* lost comment */ content: @var;
2114
-
2114
+
2115
2115
  border: 1px solid black;
2116
-
2116
+
2117
2117
  // padding & margin //
2118
2118
  padding: 0;
2119
2119
  margin: 2em;
@@ -2127,33 +2127,33 @@ div.panel {
2127
2127
 
2128
2128
  #last { color: blue }
2129
2129
  //
2130
- .comma-delimited {
2130
+ .comma-delimited {
2131
2131
  background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
2132
2132
  text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
2133
2133
  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
2134
- 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
2134
+ 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
2135
2135
  }
2136
2136
  @font-face {
2137
2137
  font-family: Headline;
2138
2138
  src: local(Futura-Medium),
2139
- url(fonts.svg#MyGeometricModern) format("svg");
2139
+ url(fonts.svg#MyGeometricModern) format("svg");
2140
2140
  }
2141
2141
  .other {
2142
2142
  -moz-transform: translate(0, 11em) rotate(-90deg);
2143
2143
  }
2144
2144
  p:not([class*="lead"]) {
2145
- color: black;
2145
+ color: black;
2146
2146
  }
2147
2147
 
2148
2148
  input[type="text"].class#id[attr=32]:not(1) {
2149
- color: white;
2150
- }
2149
+ color: white;
2150
+ }
2151
2151
 
2152
2152
  div#id.class[a=1][b=2].class:not(1) {
2153
- color: white;
2154
- }
2153
+ color: white;
2154
+ }
2155
2155
 
2156
- ul.comma > li:not(:only-child)::after {
2156
+ ul.comma > li:not(:only-child)::after {
2157
2157
  color: white;
2158
2158
  }
2159
2159
 
@@ -2250,7 +2250,7 @@ p + h1 {
2250
2250
  #more-shorthands {
2251
2251
  margin: 0;
2252
2252
  padding: 1px 0 2px 0;
2253
- font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
2253
+ font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
2254
2254
  }
2255
2255
 
2256
2256
  .misc {
@@ -2271,7 +2271,7 @@ p + h1 {
2271
2271
 
2272
2272
  #functions {
2273
2273
  @var: 10;
2274
- color: color("evil red"); // #660000
2274
+ color: color("red");
2275
2275
  width: increment(15);
2276
2276
  height: undefined("self");
2277
2277
  border-width: add(2, 3);
@@ -2303,7 +2303,7 @@ p + h1 {
2303
2303
  }
2304
2304
 
2305
2305
  .mixina (@style, @width, @color: black) {
2306
- border: @width @style @color;
2306
+ border: @width @style @color;
2307
2307
  }
2308
2308
 
2309
2309
  .mixiny
@@ -2363,11 +2363,11 @@ body {
2363
2363
  }
2364
2364
 
2365
2365
  .nested-ruleset (@width: 200px) {
2366
- width: @width;
2367
- .column { margin: @width; }
2366
+ width: @width;
2367
+ .column { margin: @width; }
2368
2368
  }
2369
2369
  .content {
2370
- .nested-ruleset(600px);
2370
+ .nested-ruleset(600px);
2371
2371
  }
2372
2372
 
2373
2373
  //
@@ -2385,8 +2385,8 @@ body {
2385
2385
  //
2386
2386
 
2387
2387
  .var-inside () {
2388
- @var: 10px;
2389
- width: @var;
2388
+ @var: 10px;
2389
+ width: @var;
2390
2390
  }
2391
2391
  #var-inside { .var-inside; }
2392
2392
  .mix-inner (@var) {
@@ -2398,9 +2398,9 @@ body {
2398
2398
  height: @a * 10;
2399
2399
 
2400
2400
  .innest {
2401
- width: @a;
2401
+ width: @a;
2402
2402
  .mix-inner(@a * 2);
2403
- }
2403
+ }
2404
2404
  }
2405
2405
  }
2406
2406
 
@@ -2408,100 +2408,100 @@ body {
2408
2408
  .mix(30);
2409
2409
  }
2410
2410
  .mixin () {
2411
- zero: 0;
2411
+ zero: 0;
2412
2412
  }
2413
2413
  .mixin (@a: 1px) {
2414
- one: 1;
2414
+ one: 1;
2415
2415
  }
2416
2416
  .mixin (@a) {
2417
- one-req: 1;
2417
+ one-req: 1;
2418
2418
  }
2419
2419
  .mixin (@a: 1px, @b: 2px) {
2420
- two: 2;
2420
+ two: 2;
2421
2421
  }
2422
2422
 
2423
2423
  .mixin (@a, @b, @c) {
2424
- three-req: 3;
2424
+ three-req: 3;
2425
2425
  }
2426
2426
 
2427
2427
  .mixin (@a: 1px, @b: 2px, @c: 3px) {
2428
- three: 3;
2428
+ three: 3;
2429
2429
  }
2430
2430
 
2431
2431
  .zero {
2432
- .mixin();
2432
+ .mixin();
2433
2433
  }
2434
2434
 
2435
2435
  .one {
2436
- .mixin(1);
2436
+ .mixin(1);
2437
2437
  }
2438
2438
 
2439
2439
  .two {
2440
- .mixin(1, 2);
2440
+ .mixin(1, 2);
2441
2441
  }
2442
2442
 
2443
2443
  .three {
2444
- .mixin(1, 2, 3);
2444
+ .mixin(1, 2, 3);
2445
2445
  }
2446
2446
 
2447
2447
  //
2448
2448
 
2449
2449
  .mixout ('left') {
2450
- left: 1;
2450
+ left: 1;
2451
2451
  }
2452
2452
 
2453
2453
  .mixout ('right') {
2454
- right: 1;
2454
+ right: 1;
2455
2455
  }
2456
2456
 
2457
2457
  .left {
2458
- .mixout('left');
2458
+ .mixout('left');
2459
2459
  }
2460
2460
  .right {
2461
- .mixout('right');
2461
+ .mixout('right');
2462
2462
  }
2463
2463
 
2464
2464
  //
2465
2465
 
2466
2466
  .border (@side, @width) {
2467
- color: black;
2468
- .border-side(@side, @width);
2467
+ color: black;
2468
+ .border-side(@side, @width);
2469
2469
  }
2470
2470
  .border-side (left, @w) {
2471
- border-left: @w;
2471
+ border-left: @w;
2472
2472
  }
2473
2473
  .border-side (right, @w) {
2474
- border-right: @w;
2474
+ border-right: @w;
2475
2475
  }
2476
2476
 
2477
2477
  .border-right {
2478
- .border(right, 4px);
2478
+ .border(right, 4px);
2479
2479
  }
2480
2480
  .border-left {
2481
- .border(left, 4px);
2481
+ .border(left, 4px);
2482
2482
  }
2483
2483
 
2484
2484
  //
2485
2485
 
2486
2486
 
2487
2487
  .border-radius (@r) {
2488
- both: @r * 10;
2488
+ both: @r * 10;
2489
2489
  }
2490
2490
  .border-radius (@r, left) {
2491
- left: @r;
2491
+ left: @r;
2492
2492
  }
2493
2493
  .border-radius (@r, right) {
2494
- right: @r;
2494
+ right: @r;
2495
2495
  }
2496
2496
 
2497
2497
  .only-right {
2498
- .border-radius(33, right);
2498
+ .border-radius(33, right);
2499
2499
  }
2500
2500
  .only-left {
2501
- .border-radius(33, left);
2501
+ .border-radius(33, left);
2502
2502
  }
2503
2503
  .left-right {
2504
- .border-radius(33);
2504
+ .border-radius(33);
2505
2505
  }
2506
2506
  .mixin { border: 1px solid black; }
2507
2507
  .mixout { border-color: orange; }
@@ -2679,12 +2679,12 @@ body {
2679
2679
  }
2680
2680
  }
2681
2681
  }h1, h2, h3 {
2682
- a, p {
2683
- &:hover {
2684
- color: red;
2685
- }
2686
- }
2687
- }
2682
+ a, p {
2683
+ &:hover {
2684
+ color: red;
2685
+ }
2686
+ }
2687
+ }
2688
2688
 
2689
2689
  #all { color: blue; }
2690
2690
  #the { color: blue; }
@@ -2743,29 +2743,29 @@ td, input {
2743
2743
  }
2744
2744
 
2745
2745
  .redefinition {
2746
- @var: 4;
2747
- @var: 2;
2748
- @var: 3;
2749
- three: @var;
2746
+ @var: 4;
2747
+ @var: 2;
2748
+ @var: 3;
2749
+ three: @var;
2750
2750
  }
2751
2751
 
2752
2752
  .values {
2753
- @a: 'Trebuchet';
2754
- font-family: @a, @a, @a;
2753
+ @a: 'Trebuchet';
2754
+ font-family: @a, @a, @a;
2755
2755
  }
2756
2756
 
2757
2757
 
2758
2758
  .whitespace
2759
- { color: white; }
2760
-
2759
+ { color: white; }
2760
+
2761
2761
  .whitespace
2762
2762
  {
2763
2763
  color: white;
2764
2764
  }
2765
- .whitespace
2765
+ .whitespace
2766
2766
  { color: white; }
2767
2767
 
2768
- .whitespace{color:white;}
2768
+ .whitespace{color:white;}
2769
2769
  .whitespace { color : white ; }
2770
2770
 
2771
2771
  .white,
@@ -2781,14 +2781,14 @@ td, input {
2781
2781
  .no-semi-column {border: 2px solid white}
2782
2782
  .newlines {
2783
2783
  background: the,
2784
- great,
2785
- wall;
2784
+ great,
2785
+ wall;
2786
2786
  border: 2px
2787
- solid
2788
- black;
2787
+ solid
2788
+ black;
2789
2789
  }
2790
2790
  .empty {
2791
-
2791
+
2792
2792
  }
2793
2793
  #yelow {
2794
2794
  #short {
@@ -2873,11 +2873,11 @@ td, input {
2873
2873
  color: red; /* A C-style comment */
2874
2874
  background-color: orange; // A little comment
2875
2875
  font-size: 12px;
2876
-
2876
+
2877
2877
  /* lost comment */ content: @var;
2878
-
2878
+
2879
2879
  border: 1px solid black;
2880
-
2880
+
2881
2881
  // padding & margin //
2882
2882
  padding: 0;
2883
2883
  margin: 2em;
@@ -2891,33 +2891,33 @@ td, input {
2891
2891
 
2892
2892
  #last { color: blue }
2893
2893
  //
2894
- .comma-delimited {
2894
+ .comma-delimited {
2895
2895
  background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
2896
2896
  text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
2897
2897
  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
2898
- 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
2898
+ 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
2899
2899
  }
2900
2900
  @font-face {
2901
2901
  font-family: Headline;
2902
2902
  src: local(Futura-Medium),
2903
- url(fonts.svg#MyGeometricModern) format("svg");
2903
+ url(fonts.svg#MyGeometricModern) format("svg");
2904
2904
  }
2905
2905
  .other {
2906
2906
  -moz-transform: translate(0, 11em) rotate(-90deg);
2907
2907
  }
2908
2908
  p:not([class*="lead"]) {
2909
- color: black;
2909
+ color: black;
2910
2910
  }
2911
2911
 
2912
2912
  input[type="text"].class#id[attr=32]:not(1) {
2913
- color: white;
2914
- }
2913
+ color: white;
2914
+ }
2915
2915
 
2916
2916
  div#id.class[a=1][b=2].class:not(1) {
2917
- color: white;
2918
- }
2917
+ color: white;
2918
+ }
2919
2919
 
2920
- ul.comma > li:not(:only-child)::after {
2920
+ ul.comma > li:not(:only-child)::after {
2921
2921
  color: white;
2922
2922
  }
2923
2923
 
@@ -3014,7 +3014,7 @@ p + h1 {
3014
3014
  #more-shorthands {
3015
3015
  margin: 0;
3016
3016
  padding: 1px 0 2px 0;
3017
- font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
3017
+ font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
3018
3018
  }
3019
3019
 
3020
3020
  .misc {
@@ -3035,7 +3035,7 @@ p + h1 {
3035
3035
 
3036
3036
  #functions {
3037
3037
  @var: 10;
3038
- color: color("evil red"); // #660000
3038
+ color: color("red");
3039
3039
  width: increment(15);
3040
3040
  height: undefined("self");
3041
3041
  border-width: add(2, 3);
@@ -3067,7 +3067,7 @@ p + h1 {
3067
3067
  }
3068
3068
 
3069
3069
  .mixina (@style, @width, @color: black) {
3070
- border: @width @style @color;
3070
+ border: @width @style @color;
3071
3071
  }
3072
3072
 
3073
3073
  .mixiny
@@ -3127,11 +3127,11 @@ body {
3127
3127
  }
3128
3128
 
3129
3129
  .nested-ruleset (@width: 200px) {
3130
- width: @width;
3131
- .column { margin: @width; }
3130
+ width: @width;
3131
+ .column { margin: @width; }
3132
3132
  }
3133
3133
  .content {
3134
- .nested-ruleset(600px);
3134
+ .nested-ruleset(600px);
3135
3135
  }
3136
3136
 
3137
3137
  //
@@ -3149,8 +3149,8 @@ body {
3149
3149
  //
3150
3150
 
3151
3151
  .var-inside () {
3152
- @var: 10px;
3153
- width: @var;
3152
+ @var: 10px;
3153
+ width: @var;
3154
3154
  }
3155
3155
  #var-inside { .var-inside; }
3156
3156
  .mix-inner (@var) {
@@ -3162,9 +3162,9 @@ body {
3162
3162
  height: @a * 10;
3163
3163
 
3164
3164
  .innest {
3165
- width: @a;
3165
+ width: @a;
3166
3166
  .mix-inner(@a * 2);
3167
- }
3167
+ }
3168
3168
  }
3169
3169
  }
3170
3170
 
@@ -3172,100 +3172,100 @@ body {
3172
3172
  .mix(30);
3173
3173
  }
3174
3174
  .mixin () {
3175
- zero: 0;
3175
+ zero: 0;
3176
3176
  }
3177
3177
  .mixin (@a: 1px) {
3178
- one: 1;
3178
+ one: 1;
3179
3179
  }
3180
3180
  .mixin (@a) {
3181
- one-req: 1;
3181
+ one-req: 1;
3182
3182
  }
3183
3183
  .mixin (@a: 1px, @b: 2px) {
3184
- two: 2;
3184
+ two: 2;
3185
3185
  }
3186
3186
 
3187
3187
  .mixin (@a, @b, @c) {
3188
- three-req: 3;
3188
+ three-req: 3;
3189
3189
  }
3190
3190
 
3191
3191
  .mixin (@a: 1px, @b: 2px, @c: 3px) {
3192
- three: 3;
3192
+ three: 3;
3193
3193
  }
3194
3194
 
3195
3195
  .zero {
3196
- .mixin();
3196
+ .mixin();
3197
3197
  }
3198
3198
 
3199
3199
  .one {
3200
- .mixin(1);
3200
+ .mixin(1);
3201
3201
  }
3202
3202
 
3203
3203
  .two {
3204
- .mixin(1, 2);
3204
+ .mixin(1, 2);
3205
3205
  }
3206
3206
 
3207
3207
  .three {
3208
- .mixin(1, 2, 3);
3208
+ .mixin(1, 2, 3);
3209
3209
  }
3210
3210
 
3211
3211
  //
3212
3212
 
3213
3213
  .mixout ('left') {
3214
- left: 1;
3214
+ left: 1;
3215
3215
  }
3216
3216
 
3217
3217
  .mixout ('right') {
3218
- right: 1;
3218
+ right: 1;
3219
3219
  }
3220
3220
 
3221
3221
  .left {
3222
- .mixout('left');
3222
+ .mixout('left');
3223
3223
  }
3224
3224
  .right {
3225
- .mixout('right');
3225
+ .mixout('right');
3226
3226
  }
3227
3227
 
3228
3228
  //
3229
3229
 
3230
3230
  .border (@side, @width) {
3231
- color: black;
3232
- .border-side(@side, @width);
3231
+ color: black;
3232
+ .border-side(@side, @width);
3233
3233
  }
3234
3234
  .border-side (left, @w) {
3235
- border-left: @w;
3235
+ border-left: @w;
3236
3236
  }
3237
3237
  .border-side (right, @w) {
3238
- border-right: @w;
3238
+ border-right: @w;
3239
3239
  }
3240
3240
 
3241
3241
  .border-right {
3242
- .border(right, 4px);
3242
+ .border(right, 4px);
3243
3243
  }
3244
3244
  .border-left {
3245
- .border(left, 4px);
3245
+ .border(left, 4px);
3246
3246
  }
3247
3247
 
3248
3248
  //
3249
3249
 
3250
3250
 
3251
3251
  .border-radius (@r) {
3252
- both: @r * 10;
3252
+ both: @r * 10;
3253
3253
  }
3254
3254
  .border-radius (@r, left) {
3255
- left: @r;
3255
+ left: @r;
3256
3256
  }
3257
3257
  .border-radius (@r, right) {
3258
- right: @r;
3258
+ right: @r;
3259
3259
  }
3260
3260
 
3261
3261
  .only-right {
3262
- .border-radius(33, right);
3262
+ .border-radius(33, right);
3263
3263
  }
3264
3264
  .only-left {
3265
- .border-radius(33, left);
3265
+ .border-radius(33, left);
3266
3266
  }
3267
3267
  .left-right {
3268
- .border-radius(33);
3268
+ .border-radius(33);
3269
3269
  }
3270
3270
  .mixin { border: 1px solid black; }
3271
3271
  .mixout { border-color: orange; }
@@ -3443,12 +3443,12 @@ body {
3443
3443
  }
3444
3444
  }
3445
3445
  }h1, h2, h3 {
3446
- a, p {
3447
- &:hover {
3448
- color: red;
3449
- }
3450
- }
3451
- }
3446
+ a, p {
3447
+ &:hover {
3448
+ color: red;
3449
+ }
3450
+ }
3451
+ }
3452
3452
 
3453
3453
  #all { color: blue; }
3454
3454
  #the { color: blue; }
@@ -3507,29 +3507,29 @@ td, input {
3507
3507
  }
3508
3508
 
3509
3509
  .redefinition {
3510
- @var: 4;
3511
- @var: 2;
3512
- @var: 3;
3513
- three: @var;
3510
+ @var: 4;
3511
+ @var: 2;
3512
+ @var: 3;
3513
+ three: @var;
3514
3514
  }
3515
3515
 
3516
3516
  .values {
3517
- @a: 'Trebuchet';
3518
- font-family: @a, @a, @a;
3517
+ @a: 'Trebuchet';
3518
+ font-family: @a, @a, @a;
3519
3519
  }
3520
3520
 
3521
3521
 
3522
3522
  .whitespace
3523
- { color: white; }
3524
-
3523
+ { color: white; }
3524
+
3525
3525
  .whitespace
3526
3526
  {
3527
3527
  color: white;
3528
3528
  }
3529
- .whitespace
3529
+ .whitespace
3530
3530
  { color: white; }
3531
3531
 
3532
- .whitespace{color:white;}
3532
+ .whitespace{color:white;}
3533
3533
  .whitespace { color : white ; }
3534
3534
 
3535
3535
  .white,
@@ -3545,14 +3545,14 @@ td, input {
3545
3545
  .no-semi-column {border: 2px solid white}
3546
3546
  .newlines {
3547
3547
  background: the,
3548
- great,
3549
- wall;
3548
+ great,
3549
+ wall;
3550
3550
  border: 2px
3551
- solid
3552
- black;
3551
+ solid
3552
+ black;
3553
3553
  }
3554
3554
  .empty {
3555
-
3555
+
3556
3556
  }
3557
3557
  #yelow {
3558
3558
  #short {
@@ -3637,11 +3637,11 @@ td, input {
3637
3637
  color: red; /* A C-style comment */
3638
3638
  background-color: orange; // A little comment
3639
3639
  font-size: 12px;
3640
-
3640
+
3641
3641
  /* lost comment */ content: @var;
3642
-
3642
+
3643
3643
  border: 1px solid black;
3644
-
3644
+
3645
3645
  // padding & margin //
3646
3646
  padding: 0;
3647
3647
  margin: 2em;
@@ -3655,33 +3655,33 @@ td, input {
3655
3655
 
3656
3656
  #last { color: blue }
3657
3657
  //
3658
- .comma-delimited {
3658
+ .comma-delimited {
3659
3659
  background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
3660
3660
  text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
3661
3661
  -moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
3662
- 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
3662
+ 0pt 4px 6px rgba(255, 255, 255, 0.4) inset;
3663
3663
  }
3664
3664
  @font-face {
3665
3665
  font-family: Headline;
3666
3666
  src: local(Futura-Medium),
3667
- url(fonts.svg#MyGeometricModern) format("svg");
3667
+ url(fonts.svg#MyGeometricModern) format("svg");
3668
3668
  }
3669
3669
  .other {
3670
3670
  -moz-transform: translate(0, 11em) rotate(-90deg);
3671
3671
  }
3672
3672
  p:not([class*="lead"]) {
3673
- color: black;
3673
+ color: black;
3674
3674
  }
3675
3675
 
3676
3676
  input[type="text"].class#id[attr=32]:not(1) {
3677
- color: white;
3678
- }
3677
+ color: white;
3678
+ }
3679
3679
 
3680
3680
  div#id.class[a=1][b=2].class:not(1) {
3681
- color: white;
3682
- }
3681
+ color: white;
3682
+ }
3683
3683
 
3684
- ul.comma > li:not(:only-child)::after {
3684
+ ul.comma > li:not(:only-child)::after {
3685
3685
  color: white;
3686
3686
  }
3687
3687
 
@@ -3778,7 +3778,7 @@ p + h1 {
3778
3778
  #more-shorthands {
3779
3779
  margin: 0;
3780
3780
  padding: 1px 0 2px 0;
3781
- font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
3781
+ font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;
3782
3782
  }
3783
3783
 
3784
3784
  .misc {
@@ -3799,7 +3799,7 @@ p + h1 {
3799
3799
 
3800
3800
  #functions {
3801
3801
  @var: 10;
3802
- color: color("evil red"); // #660000
3802
+ color: color("red");
3803
3803
  width: increment(15);
3804
3804
  height: undefined("self");
3805
3805
  border-width: add(2, 3);
@@ -3831,7 +3831,7 @@ p + h1 {
3831
3831
  }
3832
3832
 
3833
3833
  .mixina (@style, @width, @color: black) {
3834
- border: @width @style @color;
3834
+ border: @width @style @color;
3835
3835
  }
3836
3836
 
3837
3837
  .mixiny
@@ -3891,11 +3891,11 @@ body {
3891
3891
  }
3892
3892
 
3893
3893
  .nested-ruleset (@width: 200px) {
3894
- width: @width;
3895
- .column { margin: @width; }
3894
+ width: @width;
3895
+ .column { margin: @width; }
3896
3896
  }
3897
3897
  .content {
3898
- .nested-ruleset(600px);
3898
+ .nested-ruleset(600px);
3899
3899
  }
3900
3900
 
3901
3901
  //
@@ -3913,8 +3913,8 @@ body {
3913
3913
  //
3914
3914
 
3915
3915
  .var-inside () {
3916
- @var: 10px;
3917
- width: @var;
3916
+ @var: 10px;
3917
+ width: @var;
3918
3918
  }
3919
3919
  #var-inside { .var-inside; }
3920
3920
  .mix-inner (@var) {
@@ -3926,9 +3926,9 @@ body {
3926
3926
  height: @a * 10;
3927
3927
 
3928
3928
  .innest {
3929
- width: @a;
3929
+ width: @a;
3930
3930
  .mix-inner(@a * 2);
3931
- }
3931
+ }
3932
3932
  }
3933
3933
  }
3934
3934
 
@@ -3936,44 +3936,44 @@ body {
3936
3936
  .mix(30);
3937
3937
  }
3938
3938
  .mixin () {
3939
- zero: 0;
3939
+ zero: 0;
3940
3940
  }
3941
3941
  .mixin (@a: 1px) {
3942
- one: 1;
3942
+ one: 1;
3943
3943
  }
3944
3944
  .mixin (@a) {
3945
- one-req: 1;
3945
+ one-req: 1;
3946
3946
  }
3947
3947
  .mixin (@a: 1px, @b: 2px) {
3948
- two: 2;
3948
+ two: 2;
3949
3949
  }
3950
3950
 
3951
3951
  .mixin (@a, @b, @c) {
3952
- three-req: 3;
3952
+ three-req: 3;
3953
3953
  }
3954
3954
 
3955
3955
  .mixin (@a: 1px, @b: 2px, @c: 3px) {
3956
- three: 3;
3956
+ three: 3;
3957
3957
  }
3958
3958
 
3959
3959
  .zero {
3960
- .mixin();
3960
+ .mixin();
3961
3961
  }
3962
3962
 
3963
3963
  .one {
3964
- .mixin(1);
3964
+ .mixin(1);
3965
3965
  }
3966
3966
 
3967
3967
  .two {
3968
- .mixin(1, 2);
3968
+ .mixin(1, 2);
3969
3969
  }
3970
3970
 
3971
3971
  .three {
3972
- .mixin(1, 2, 3);
3972
+ .mixin(1, 2, 3);
3973
3973
  }
3974
3974
 
3975
3975
  //
3976
3976
 
3977
3977
  .mixout ('left') {
3978
- left: 1;
3979
- }
3978
+ left: 1;
3979
+ }