You can download the latest version of less.js from http://lesscss.org/ and copy this file into your working directory. You will also have to create the index.html and project.less files in the working directory. You can edit these files with any text editor of your choice.

You will have the following folder and file structure:

You will also need a modern web browser to inspect the results of your work.

The less.js compiler compiles the Less code in the project.less file linked with the following HTML code:

<link rel="stylesheet/less" type="text/css" href="project.less" />

Note that without setting the rel="stylesheet/less" attribute, the compiler does not recognize your code.

The reference to the less.js compiler should be included after the reference to the project.less file in the preceding code as follows:

<script src="less.js" type="text/javascript"></script>

Other Less files can be imported into project.less with the @import directive. All imports are compiled into CSS code. Also note that when using the server-side compiler, all of the compiled CSS code will be saved to the same file. The preceding code differs from the situation of linking more than one .less style sheet. When linking multiple .less style sheets, each file will be compiled independently and will not use variables and mixins defined in the other files.

The compiled CSS code will be injected into the HTML document and style your HTML elements according to normal CSS rules. When using Firefox's or Google Chrome's developer tools to inspect your source, you will find the compiled code as follows:

The less.js file also has a watch function that checks your files for changes and reloads your browser views automatically when changes are found. It is pretty simple to use—add #!watch after the URL you want to open, which in this case means appending #!watch after index.html, and then reload the browser window.

You can configure the less.js compiler by adding a less = {}; JavaScript object to your code using the following code:

<link rel="stylesheet/less" type="text/css" href="less/styles.less" />
<script type="text/javascript">less = { env: 'development' };</script>
<script src="less.js" type="text/javascript"></script>

In the preceding code, less is a global object used to parse the env: 'development' settings to less.js. Please refer to http://lesscss.org/#client-side-usage-browser-options to learn more about the settings that can be used with the less.js compiler.

Alternatively, these options can be set as data attributes on the script and link tags, as can be seen in the following example code from the Less website:

<script src="less.js" data-poll="1000" data-relative-urls="false"></script> <link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

In this recipe, a local copy of the less.js compiler was used. Alternatively, you can also load the less.js compiler from content delivery network (CDN) or build it with Bower. To load less.js from CDN, you will have to add the following code to your index.html file:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.x.x/less.min.js"></script>

If you aren't aware, Bower is a package manager for the Web. You can install Bower by running the following command in your console:

npm install bower

You can then run the following command to build less.js with Bower:

bower install less

If you have not installed Node.js and npm on your system yet, you will have to do this first. You can do this by following these steps:

In the Installing Node and Grunt recipe in Chapter 11, Compiling Less Real Time for Development Using Grunt, you can read about installing Node.js and npm on your system in more detail. After installing npm, you can simply run the following command:

npm install --global less

If you are new to Less, the example Less code used inside example.less may contain some syntax that is completely alien to you. The code defines a @color variable and a paint() mixin. The Declaring variables with Less for commonly used values recipe explains the basics of variables in Less, while the Setting the properties of CSS styles with mixins recipe does the same for mixins.

By default, the lessc compiler outputs to stdout. You can redirect the output to a CSS file with the following command:

lessc example.less > example.css

Running the lessc compiler without any parameters will give you a list of options for the compiler.

You can use the -x option to compress your output as follows:

lessc -x example.less > example.css

In a similar manner, you can use either the --clean-css option for a more involved minification, or the --source-map option to create a v3 CSS source map. In the Using CSS source maps to debug your code recipe in Chapter 2, Debugging and Documenting your Less Code, you can read more about CSS source maps and Less. Note that in version 2 of Less, the --clean-css option has been moved into a plugin. The usage is similar: just install the plugin (npm install -g less-plugin-clean-css), then make use of the --clean-css argument.

There are many other third-party compilers for Less with a compressive list available at http://lesscss.org/usage.

With grunt-contrib-less, you can compile your code with Grunt. For Gulp, you can use gulp-less. The Compiling style guides with Grunt recipe in Chapter 11, Compiling Less Real Time for Development Using Grunt, shows you how to build a development workflow with the Grunt task runner.

In this recipe, you read about Grunt and Gulp, which are JavaScript task runners or build systems. Comparing with Grunt's build system, Gulp's build system is relatively new. Gulp uses streams and code over configuration, which makes it more simple and intuitive.

To use less.js inside Rhino, you will have to download and install Rhino from the following links:

Rhino enables Java to run the JavaScript code, while js.jar runs the Less compiler and generates the CSS output.

To write the output of a file, you will have to append the filename of the CSS files to the list of commands, as follows:

java -jar js.jar -f less-rhino-1.7.0.js lessc-rhino-1.7.0.js example.less example.css

You can also add options for the compiler. You can add the -x option to compress the output as follows:

java -jar js.jar -f less-rhino-1.7.0.js lessc-rhino-1.7.0.js -x example.less 

The preceding command will then output the following line of CSS code:

h1{color:#f00}

A Less compiler for Java has been built with Rhino. You can find out more information about this Less compiler for Java along with how to download it at https://github.com/marceloverdijk/lesscss-java.

Open your text editor and create a file named example.less. Variables will start with @ and will have a name with examples, including @color, @size, and @tree. To write the name, you are allowed to use any alphanumeric characters, underscores, and dashes. Using this as an elaborate example, @this-is-variable-name-with-35-chars is a valid variable name.

As you can now see, changing the font color of the h1, p, and button text is easy as you change @base-color only once. The only thing you need to do is change the single line of the code: @base-color: red;. In the Downloading, installing, and integrating less.js recipe, you can read how to use the watch function of less.js to reload your browser automatically after changing and saving the example.less file.

Variables in Less are defined as the equivalent to statics in other programming languages. You assign a value to a variable once and use it everywhere in your code. To think of it in another way, this is like defining the value of the gravitational constant (for the force of gravity) or pi in your code. Both these values become constants once they are declared and so do not change at runtime. In fact, you can still change or redeclare them in Less, as explained in the There's more… section of this recipe.

You can assign any valid Less (or CSS) property value to a variable. Valid property values include the numbers, strings, lists, CSV lists, and escaped values. Strings and numbers can be used together to define values with units. For instance, the following code will show you a declaration for a length in pixels:

@length: 100px;

Other examples of valid variable declarations can be found in the following code:

@color: red;
@list: a b c d;
@csv-list: a, b, c, d;
@escaped-value: ~""dark@{color}";

Less uses the last declaration wins and lazy loading rules, which play an important role and make redeclaration of a variable suitable for customization.

Open your text editor and create a file named mixins.less. In this file, define a mixin for rounded corners, as follows:

.rounded-corners() {
  border-radius: 5px;
}

You will also need an index.html file containing some HTML elements to which you can give rounded corners.

Every element has a background-color and color property set to make the rounded corners visible and the fonts readable. The color property is set with the built-in contrast function. You can read more about the built-in functions in the Using the built-in functions of Less recipe. When you open the index.html file, it looks like the following screenshot:

Less allows you to copy the properties of a class to another by simply adding the class to the property list. Consider the following example Less code:

.class1
{
  property1: value1;
}
.class 2
{
  .class1
  property2: value2;
}

The preceding Less code will compile into the following CSS code:

.class1 { 
  property1: value1; 
} 
.class2 { 
  property1: value1; 
  property2: value2; 
} 

As you can see, the property1 property is added to the .class2 class, but .class1 has also been compiled into the source. With parentheses, the .class1 mixin is not compiled into the CSS source, so the following code will not be visible in the source:

.class1() { 
  property1: value1; 
} 

In the example code of this recipe, you set a background-color and color property for each element again. While using parametric mixins, as described in the Using parametric mixins recipe in Chapter 3, Using Variables and Mixins, you can write a second mixin to set these properties. The roundedcorners() mixin can be called from this particular mixin. The second mixin will then look like the following Less code:

.colored-and-rounded(@background-color: red) {
  .rounded-corners();
  background-color: @background-color;
  color: contrast(@background-color);
}

The colored-and-rounded() mixin can be added to the mixins.less file. Your project.less file will then look as follows:

@import "mixins.less";

@header-background-color: red;
@paragraph-background-color: orange;
@footer-background-color: green;

header {
  .colored-and-rounded();
}
p {
  .colored-and-rounded();
}
footer {
  .colored-and-rounded();
}

To get started, you will need to create a valid HTML5 file, including some nested elements. Your HTML, for instance, may look like the following code:

<section role="main">
<h1>heading</h1>
<p>some content</p>
</section>

You will also have to create an empty Less file named project.less. Make sure the head section of your HTML5 document also contains the following code:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

In CSS, the section with the nested h1 and p elements can, for instance, be styled with the following CSS code:

section h1 {}
section p {}

However, with Less, you can style the same elements using the following Less code:

section {
  h1 {}
  p{}
}

In the preceding example, nesting the selector mimics the nested structure of your HTML code. Nesting makes the code intuitive and so much easier to read and maintain. Less's code will also be more concise than its corresponding CSS code. You should use nesting with care; nesting too much will break your CSS code after small changes in your HTML. You should not try to nest your complete HTML structure, but nesting will be very useful to assign pseudo classes, such as hover, to your elements.

Note that the nested selectors in Less still compile to un-nested selectors in CSS.

To see how this works, use the following Less code:

section {
  h1 {font-size: 20em;}
  p{ padding: 0 10px;}
}

The preceding code will compile into the following CSS code:

section h1 { 
  font-size: 20em;
} 
section p { 
  padding: 0 10px; 
} 

Although nesting your selector can make your code more intuitive, it can equally break other things. For instance, considering object-oriented CSS (OOCSS) principles; these do not allow nesting of headings (h1 to h6). Headings are considered to be built-in objects in OOCSS and so their appearance should be consistent across an entire site.

You will first need to create a Less file named project.less and a valid HTML5 document named index.html. You should make sure the head section of the index.html file contains the following lines of code:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

In Less, you can operate numbers, variables, and colors. The compiler understands colors and units. Take a look at the following Less code:

@width: 50px;
@color: yellow;
p {
  width: @width * 50; 
  color: @color + #111;
}

This will actually compile into the following CSS code:

p { 
  width: 2500px; 
  color: #ffff11; 
}

The Less compiler accepts different types of color definitions. In Less, you can use the hexadecimal notation for red, green, and blue (RGB) values, the RGB functional notation, or one of the 148 color names defined in CSS3. A complete overview of the color definition can be found at http://www.w3.org/TR/css3-color/ and http://lesscss.org/functions/#color-definition. When applying a basic operation on two or more colors, the compiler gives the result as a color even when different types of color definitions are used. As you can see, yellow + #111 compiles into #ffff11.

When multiplying 50px fifty times, the compiler automatically adds the px unit after the calculated result.

In this recipe, you learned about some basic operations on colors. Less also has many built-in functions to define and manipulate colors. You can read more about Less's built-in color functions in Chapter 4, Leveraging the Less Built-in Functions.

Create a valid HTML document named index.html and an empty project.less file. Make sure your index.html HTML5 document has the following lines of code in its head section:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

This recipe will show you how to use the darken() and contrast() built-in functions. Perform the following steps:

Both the darken() and contrast() functions return a color. The darken() function returns a darker variant of the input color, and contrast() returns black or white, based on the highest contrast with the input color.

The darken() function ensures that a color is readable against a background, which will be useful to meet web accessibility requirements too. The contrast() function compares the luma value (also called luminosity that represents the brightness in an image) of a color and not the lightness.

The built-in functions of Less can be grouped based on their input type. Refer to the following functions:

You will also have to note that the example code in this recipe did not meet the DRY principle of software programming. When using guards, as described in the Building loops leveraging mixins and guards recipe in Chapter 6, Advanced Less coding, you can solve this issue of code repetition. You can rewrite the Less code to the following code, which uses a guard:

.shade(@color,@number) when (@number>0) { 
.shade(@color,@number - 1); 
@darkcolor: darken(@color,(25% * (@number - 1))); 
.color@{number} { 
  background-color: @darkcolor; 
  color: contrast(@darkcolor); 
  } 
} 
.shade(white,5); 

A complete list of the built-in functions supported by Less can be found at http://lesscss.org/functions/.

Open your text editor and create a file named project.less. If you don't use the command-line compiler, you will also have to create a valid HTML5 document, including the following lines of code in the head section:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

The Less compiler doesn't throw an error for mixins with the same (or conflicting) names. The compiler compiles every matching mixin into the CSS code. You can read more about matching mixins in the Building loops leveraging mixins guards recipe in Chapter 6, Advanced Less coding.

Namespaces prevent conflicting names. In Less, a namespace starts with # and the code for it should be wrapped between accolades. A typical namespace will look as follows:

#namespace { .mixin(){} }

Mixins inside a namespace can be called by adding the namespace before the mixin call, which you can see in the following code:

#namespace > mixin;

You can also use the following code; it will generate the same result as you have obtained in the preceding code:

#namespace mixin;