Fix inconsistencies and add resource links

1 files changed, 80 insertions, 70 deletions

diff --git a/less.html.markdown b/less.html.markdown
index a1018ca3..f4887947 100644
--- a/less.html.markdown
+++ b/less.html.markdown
@@ -3,6 +3,7 @@ language: less
 filename: learnless.less
 contributors:
   - ["Saravanan Ganesh", "http://srrvnn.me"]
+  - ["Tiaan du Plessis", "https://github.com/tidupls"]
 ---
 
 Less is a CSS pre-processor, that adds features such as variables, nesting, mixins and more.
@@ -24,8 +25,8 @@ Less (and other preprocessors, such as [Sass](http://sass-lang.com/) help develo
 /* You can store a CSS value (such as a color) in a variable.
 Use the '@' symbol to create a variable. */
 
-@primary-color: #A3A4FF;
-@secondary-color: #51527F;
+@primary-color: #a3a4ff;
+@secondary-color: #51527f; 
 @body-font: 'Roboto', sans-serif;
 
 /* You can use the variables throughout your stylesheet.
@@ -39,7 +40,7 @@ body {
 
 /* This would compile to: */
 body {
-	background-color: #A3A4FF;
+	background-color: #a3a4ff;
 	color: #51527F;
 	font-family: 'Roboto', sans-serif;
 }
@@ -86,7 +87,7 @@ div {
 	margin-right: auto;
 	left: 0;
 	right: 0;
-	background-color: #A3A4FF;
+	background-color: #a3a4ff;
 }
 
 /* You can omit the mixin code from being compiled by adding parenthesis
@@ -112,7 +113,66 @@ div {
   margin-right: auto;
   left: 0;
   right: 0;
-  background-color: #A3A4FF;
+  background-color: #a3a4ff;
+}
+
+
+/*Nesting
+==============================*/
+
+
+
+/*Less allows you to nest selectors within selectors */
+
+ul {
+	list-style-type: none;
+	margin-top: 2em;
+
+	li {
+		background-color: #f00;
+	}
+}
+
+/* '&' will be replaced by the parent selector. */
+/* You can also nest pseudo-classes. */
+/* Keep in mind that over-nesting will make your code less maintainable.
+Best practices recommend going no more than 3 levels deep when nesting.
+For example: */
+
+ul {
+	list-style-type: none;
+	margin-top: 2em;
+
+	li {
+		background-color: red;
+
+		&:hover {
+		  background-color: blue;
+		}
+
+		a {
+		  color: white;
+		}
+	}
+}
+
+/* Compiles to: */
+
+ul {
+  list-style-type: none;
+  margin-top: 2em;
+}
+
+ul li {
+  background-color: red;
+}
+
+ul li:hover {
+  background-color: blue;
+}
+
+ul li a {
+  color: white;
 }
 
 
@@ -130,8 +190,12 @@ body {
   width: round(10.25px);
 }
 
+.header {
+	background-color: lighten(#000, 0.5);
+}
+
 .footer {
-  background-color: fadeout(#000000, 0.25)
+  background-color: fadeout(#000, 0.25)
 }
 
 /* Compiles to: */
@@ -140,6 +204,10 @@ body {
   width: 10px;
 }
 
+.header {
+  background-color: #010101;
+}
+
 .footer {
   background-color: rgba(0, 0, 0, 0.75);
 }
@@ -155,12 +223,12 @@ body {
    and return the percentage */
 
 .average(@x, @y) {
-  @average_result: ((@x + @y) / 2);
+  @average-result: ((@x + @y) / 2);
 }
 
 div {
   .average(16px, 50px); // "call" the mixin
-  padding: @average_result;    // use its "return" value
+  padding: @average-result;    // use its "return" value
 }
 
 /* Compiles to: */
@@ -202,67 +270,6 @@ div {
    add unnecessary bloat to the files created by the Less compiler. */
 
 
-
-/*Nesting
-==============================*/
-
-
-
-/*Less allows you to nest selectors within selectors */
-
-ul {
-	list-style-type: none;
-	margin-top: 2em;
-
-	li {
-		background-color: #FF0000;
-	}
-}
-
-/* '&' will be replaced by the parent selector. */
-/* You can also nest pseudo-classes. */
-/* Keep in mind that over-nesting will make your code less maintainable.
-Best practices recommend going no more than 3 levels deep when nesting.
-For example: */
-
-ul {
-	list-style-type: none;
-	margin-top: 2em;
-
-	li {
-		background-color: red;
-
-		&:hover {
-		  background-color: blue;
-		}
-
-		a {
-		  color: white;
-		}
-	}
-}
-
-/* Compiles to: */
-
-ul {
-  list-style-type: none;
-  margin-top: 2em;
-}
-
-ul li {
-  background-color: red;
-}
-
-ul li:hover {
-  background-color: blue;
-}
-
-ul li a {
-  color: white;
-}
-
-
-
 /*Partials and Imports
 ==============================*/
 
@@ -365,7 +372,9 @@ body {
 
 ## Practice Less
 
-If you want to play with Less in your browser, check out [LESS2CSS](http://lesscss.org/less-preview/).
+If you want to play with Less in your browser, check out:
+* [Codepen](http://codepen.io/)
+* [LESS2CSS](http://lesscss.org/less-preview/)
 
 ## Compatibility
 
@@ -377,3 +386,4 @@ with your target browsers.
 
 ## Further reading
 * [Official Documentation](http://lesscss.org/features/)
+* [Less CSS - Beginner's Guide](http://www.hongkiat.com/blog/less-basic/)