[less/en] Add Less tutorial, similar to sass

1 files changed, 379 insertions, 0 deletions

diff --git a/less.html.markdown b/less.html.markdown
new file mode 100644
index 00000000..41d66a54
--- /dev/null
+++ b/less.html.markdown
@@ -0,0 +1,379 @@
+---
+language: less
+filename: learnless.less
+contributors:
+  - ["Saravanan Ganesh", "http://srrvnn.me"]
+---
+
+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
+
+
+//Single line comments are removed when Less is compiled to CSS.
+
+/*Multi line comments are preserved. */
+
+
+/*Variables
+==============================*/
+
+
+
+/* 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;
+@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.*/
+
+body {
+	background-color: @primary-color;
+	color: @secondary-color;
+	font-family: @body-font;
+}
+
+/* This would compile to: */
+body {
+	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. */
+
+
+/*Mixins
+==============================*/
+
+
+
+/* If you find you are writing the same code for more than one
+element, you might want to reuse that easily.*/
+
+.center {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	right: 0;
+}
+
+/* You can use the mixin by simply adding the selector as a style */
+
+div {
+	.center;
+	background-color: @primary-color;
+}
+
+/*Which would compile to: */
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+}
+div {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	left: 0;
+	right: 0;
+	background-color: #A3A4FF;
+}
+
+/* You can omit the mixin code from being compiled by adding paranthesis
+   after the selector */
+
+.center() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+}
+
+div {
+  .center;
+  background-color: @primary-color;
+}
+
+/*Which would compile to: */
+div {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  background-color: #A3A4FF;
+}
+
+
+/*Functions
+==============================*/
+
+
+
+/* Less provides functions that can be used to accomplish a variety of
+   tasks. Consider the following */
+
+/* Functions can be invoked by using their name and passing in the
+   required arguments */
+body {
+  width: round(10.25px);
+}
+
+.footer {
+  background-color: fadeout(#000000, 0.25)
+}
+
+/* Compiles to: */
+
+body {
+  width: 10px;
+}
+
+.footer {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+/* You may also define your own functions. Functions are very similar to
+   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
+   function. */
+
+/* This function will take a target size and the parent size and calculate
+   and return the percentage */
+
+.average(@x, @y) {
+  @average_result: ((@x + @y) / 2);
+}
+
+div {
+  .average(16px, 50px); // "call" the mixin
+  padding: @average_result;    // use its "return" value
+}
+
+/* Compiles to: */
+
+div {
+  padding: 33px;
+}
+
+/*Extend (Inheritance)
+==============================*/
+
+
+
+/*Extend is a way to share the properties of one selector with another. */
+
+.display {
+  height: 50px;
+}
+
+.display-success {
+  &:extend(.display);
+	border-color: #22df56;
+}
+
+/* Compiles to: */
+.display,
+.display-success {
+  height: 50px;
+}
+.display-success {
+  border-color: #22df56;
+}
+
+/* Extending a CSS statement is preferable to creating a mixin
+   because of the way it groups together the classes that all share
+   the same base styling. If this was done with a mixin, the properties
+   would be duplicated for each statement that
+   called the mixin. While it won't affect your workflow, it will
+   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
+==============================*/
+
+
+
+/* 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
+   compiled into CSS */
+
+/* Consider the following CSS which we'll put in a file called _reset.less */
+
+html,
+body,
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+}
+
+/* Less offers @import which can be used to import partials into a file.
+   This differs from the traditional CSS @import statement which makes
+   another HTTP request to fetch the imported file. Less takes the
+   imported file and combines it with the compiled code. */
+
+@import 'reset';
+
+body {
+  font-size: 16px;
+  font-family: Helvetica, Arial, Sans-serif;
+}
+
+/* Compiles to: */
+
+html, body, ul, ol {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-size: 16px;
+  font-family: Helvetica, Arial, Sans-serif;
+}
+
+
+/*Math Operations
+==============================*/
+
+
+
+/* Less provides the following operators: +, -, *, /, and %. These can
+   be useful for calculating values directly in your Less files instead
+   of using values that you've already calculated by hand. Below is an example
+   of a setting up a simple two column design. */
+
+@content-area: 960px;
+@main-content: 600px;
+@sidebar-content: 300px;
+
+@main-size: @main-content / @content-area * 100%;
+@sidebar-size: @sidebar-content / @content-area * 100%;
+@gutter: 100% - (@main-size + @sidebar-size);
+
+body {
+  width: 100%;
+}
+
+.main-content {
+  width: @main-size;
+}
+
+.sidebar {
+  width: @sidebar-size;
+}
+
+.gutter {
+  width: @gutter;
+}
+
+/* Compiles to: */
+
+body {
+  width: 100%;
+}
+
+.main-content {
+  width: 62.5%;
+}
+
+.sidebar {
+  width: 31.25%;
+}
+
+.gutter {
+  width: 6.25%;
+}
+
+
+```
+
+## Practice Less
+
+If you want to play with Less in your browser, check out [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.
+
+[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/)