Merge remote-tracking branch 'adambard/master'

1 files changed, 105 insertions, 95 deletions

diff --git a/less.html.markdown b/less.html.markdown
index 41d66a54..1b26eb99 100644
--- a/less.html.markdown
+++ b/less.html.markdown
@@ -6,9 +6,9 @@ contributors:
 ---
 
 Less is a CSS pre-processor, that adds features such as variables, nesting, mixins and more.
-Less (and other preprocessors, such as [Sass](http://sass-lang.com/) help developers to write maintainable and DRY (Don't Repeat Yourself) code.
+Less (and other preprocessors, such as [Sass](http://sass-lang.com/)) help developers to write maintainable and DRY (Don't Repeat Yourself) code.
 
-```less
+```css
 
 
 //Single line comments are removed when Less is compiled to CSS.
@@ -16,20 +16,20 @@ Less (and other preprocessors, such as [Sass](http://sass-lang.com/) help develo
 /*Multi line comments are preserved. */
 
 
-/*Variables
-==============================*/
 
+/* Variables
+==============================*/
 
 
 /* You can store a CSS value (such as a color) in a variable.
-Use the '@' symbol to create 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.
-Now if you want to change a color, you only have to make the change once.*/
+   Now if you want to change a color, you only have to make the change once.*/
 
 body {
 	background-color: @primary-color;
@@ -38,24 +38,25 @@ body {
 }
 
 /* This would compile to: */
+
 body {
-	background-color: #A3A4FF;
+	background-color: #a3a4ff;
 	color: #51527F;
 	font-family: 'Roboto', sans-serif;
 }
 
 
 /* This is much more maintainable than having to change the color
-each time it appears throughout your stylesheet. */
+   each time it appears throughout your stylesheet. */
 
 
-/*Mixins
-==============================*/
 
+/* Mixins
+==============================*/
 
 
 /* If you find you are writing the same code for more than one
-element, you might want to reuse that easily.*/
+   element, you might want to reuse that easily.*/
 
 .center {
 	display: block;
@@ -72,7 +73,8 @@ div {
 	background-color: @primary-color;
 }
 
-/*Which would compile to: */
+/* Which would compile to: */
+
 .center {
   display: block;
   margin-left: auto;
@@ -86,10 +88,10 @@ 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 paranthesis
+/* You can omit the mixin code from being compiled by adding parenthesis
    after the selector */
 
 .center() {
@@ -105,33 +107,97 @@ div {
   background-color: @primary-color;
 }
 
-/*Which would compile to: */
+/* Which would compile to: */
 div {
   display: block;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
-  background-color: #A3A4FF;
+  background-color: #a3a4ff;
 }
 
 
-/*Functions
+
+/* 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;
+}
+
+
+
+/* Functions
+==============================*/
+
 
 /* Less provides functions that can be used to accomplish a variety of
-   tasks. Consider the following */
+   tasks. Consider the following: */
 
 /* Functions can be invoked by using their name and passing in the
-   required arguments */
+   required arguments. */
+
 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 +206,10 @@ body {
   width: 10px;
 }
 
+.header {
+  background-color: #010101;
+}
+
 .footer {
   background-color: rgba(0, 0, 0, 0.75);
 }
@@ -148,19 +218,18 @@ body {
    mixins. When trying to choose between a function or a mixin, remember
    that mixins are best for generating CSS while functions are better for
    logic that might be used throughout your Less code. The examples in
-   the Math Operators' section are ideal candidates for becoming a reusable
+   the 'Math Operators' section are ideal candidates for becoming a reusable
    function. */
 
-/* This function will take a target size and the parent size and calculate
-   and return the percentage */
+/* This function calculates the average of two numbers: */
 
 .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: */
@@ -169,11 +238,12 @@ div {
   padding: 33px;
 }
 
+
+
 /*Extend (Inheritance)
 ==============================*/
 
 
-
 /*Extend is a way to share the properties of one selector with another. */
 
 .display {
@@ -203,71 +273,10 @@ div {
 
 
 
-/*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
 ==============================*/
 
 
-
 /* Less allows you to create partial files. This can help keep your Less
    code modularized. Partial files conventionally begin with an '_',
    e.g. _reset.less. and are imported into a main less file that gets
@@ -308,9 +317,9 @@ body {
 }
 
 
-/*Math Operations
-==============================*/
 
+/* Math Operations
+==============================*/
 
 
 /* Less provides the following operators: +, -, *, /, and %. These can
@@ -365,15 +374,16 @@ 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
 
-Less can be used in any project as long as you have a program to compile it
-into CSS. You'll want to verify that the CSS you're using is compatible
-with your target browsers.
+Less can be used in any project as long as you have a program to compile it into CSS. You'll want to verify that the CSS you're using is compatible with your target browsers.
 
 [QuirksMode CSS](http://www.quirksmode.org/css/) and [CanIUse](http://caniuse.com) are great resources for checking compatibility.
 
 ## Further reading
 * [Official Documentation](http://lesscss.org/features/)
+* [Less CSS - Beginner's Guide](http://www.hongkiat.com/blog/less-basic/)