Permalink
Browse files

Update docs to encourage operations only when in parentheses

  • Loading branch information...
1 parent 31e3870 commit 33ece857d89e79d78ff66c0a289b3414bb66c469 @dmcass dmcass committed with lukeapage Aug 22, 2012
Showing with 21 additions and 23 deletions.
  1. +11 −14 templates/pages/doc.md
  2. +5 −4 templates/pages/synopsis.md
  3. +5 −5 templates/pages/usage.md
@@ -6,7 +6,7 @@ Variables
These are pretty self-explanatory:
@nice-blue: #5B83AD;
- @light-blue: @nice-blue + #111;
+ @light-blue: (@nice-blue + #111);
#header { color: @light-blue; }
@@ -363,29 +363,26 @@ Will output
Operations
----------
-Any number, color or variable can be operated on. Here are a couple of examples:
+Any number, color or variable can be operated on. Operations should be performed
+within parentheses. Here are a couple of examples:
@base: 5%;
- @filler: @base * 2;
- @other: @base + @filler;
+ @filler: (@base * 2);
+ @other: (@base + @filler);
- color: #888 / 4;
- background-color: @base-color + #111;
- height: 100% / 2 + @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:
- @var: 1px + 5;
+ @var: (1px + 5);
LESS will use that unit for the final output—`6px` in this case.
-Brackets are also authorized in operations:
+Extra parentheses are also authorized in operations:
- width: (@var + 5) * 2;
-
-And are required in compound values:
-
- border: (@width * 2) solid black;
+ width: ((@var + 5) * 2);
Color functions
---------------
@@ -128,7 +128,8 @@ Functions & Operations
Are some elements in your style sheet proportional to other elements?
Operations let you add, subtract, divide and multiply property values and colors,
-giving you the power to create complex relationships between properties.
+giving you the power to create complex relationships between properties. Operations
+should only be performed within parentheses in order to ensure compatibility with CSS.
Functions map one-to-one with JavaScript code, allowing you to manipulate values however
you want.
@@ -142,12 +143,12 @@ you want.
@red: #842210;
#header {
- color: @base-color * 3;
+ color: (@base-color * 3);
border-left: @the-border;
- border-right: @the-border * 2;
+ border-right: (@the-border * 2);
}
#footer {
- color: @base-color + #003300;
+ color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
@@ -55,8 +55,8 @@ Usage in Code
You can invoke the compiler from node, as such:
var less = require('less');
-
- less.render('.class { width: 1 + 1 }', function (e, css) {
+
+ less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
});
@@ -70,7 +70,7 @@ you may also manually invoke the parser and compiler:
var parser = new(less.Parser);
- parser.parse('.class { width: 1 + 1 }', function (err, tree) {
+ parser.parse('.class { width: (1 + 1) }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});
@@ -85,7 +85,7 @@ You may pass some options to the compiler:
filename: 'style.less' // Specify a filename, for better error messages
});
- parser.parse('.class { width: 1 + 1 }', function (e, tree) {
+ parser.parse('.class { width: (1 + 1) }', function (e, tree) {
tree.toCSS({ compress: true }); // Minify CSS output
});
@@ -98,4 +98,4 @@ There are a selection of tools available and these are documented in the github
<a href="https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS">Command Line Tools</a>
-<a href="https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js">GUI Tools</a>
+<a href="https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js">GUI Tools</a>

0 comments on commit 33ece85

Please sign in to comment.