Merge pull request mdo#131 from sgarrity/gh-pages

Add guidelines for Less/Sass operators

Author: mdo

_includes/css/operators.scss

@@ -0,0 +1,9 @@
+// Bad example
+.element {
+  margin: 10px 0 @variable*2 10px;
+}
+
+// Good example
+.element {
+  margin: 10px 0 (@variable * 2) 10px;
+}

index.html

@@ -34,6 +34,7 @@ <h4><a href="#css">CSS</a></h4>
       <li><a href="#css-single-declarations">Rules with single declarations</a></li>
       <li><a href="#css-shorthand">Shorthand notation</a></li>
       <li><a href="#css-nesting">Nesting in Less and Sass</a></li>
+      <li><a href="#css-operators">Operators in Less and Sass</a></li>
       <li><a href="#css-comments">Comments</a></li>
       <li><a href="#css-classes">Classes</a></li>
       <li><a href="#css-selectors">Selectors</a></li>
@@ -330,6 +331,16 @@ <h3>Nesting in Less and Sass</h3>
   </div>
 </div>
 
+<div class="section" id="css-operators">
+  <div class="col">
+    <h3>Operators Less and Sass</h3>
+    <p>For improved readability, wrap all math operations in parentheses with a single space between values, variables, and operators.</p>
+  </div>
+  <div class="col">
+    {% highlight scss %}{% include css/operators.scss %}{% endhighlight %}
+  </div>
+</div>
+
 <div class="section" id="css-comments">
   <div class="col">
     <h3>Comments</h3>