Update docs to encourage only performing operations within parentheses

templates/pages/doc.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
 ---------------

templates/pages/guide.md

@@ -35,8 +35,8 @@ Use
 Once installed, 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);
     });
 
@@ -50,7 +50,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());
     });
@@ -65,7 +65,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
     });
 

templates/pages/synopsis.md

@@ -28,7 +28,7 @@ h2 {
 }</code></pre></td>
   </tr>
 </table>
-		
+
 Mixins
 ------
 
@@ -116,13 +116,14 @@ This makes inheritance clear and style sheets shorter.
 </code></pre>
   </td></tr>
 </table>
-		
+
 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.
 
@@ -136,12 +137,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;
+#footer {
+  color: (@base-color + #003300);
   border-color: desaturate(@red, 10%);
 }
 
@@ -155,7 +156,7 @@ you want.
   border-left: 1px;
   border-right: 2px;
 }
-#footer { 
+#footer {
   color: #114411;
   border-color: #7d2717;
 }