Less Web Development Essentials (Second Edition): Leverage the features of Less to write better, reusable, and maintainable CSS code

With Less (and CSS), you can style your HTML code using selectors. The CSS selectors are patterns or names that identify which HTML elements of the web page should be styled. The CSS selectors play an important role in writing the Less code.

For body p.article {color:red}, the selector here is body p.article. Selectors don't refer exclusively to one element. They can point to more than one element and different ones can refer to the same element. For instance, a single p selector refers to all the p elements, including the p elements with a .article class. In case of conflicts, cascade and specificity determine the styles that should be applied. When writing the Less code, we should keep the aforementioned rules in mind. Less makes it easier to write complex CSS without changing how your website looks. It doesn't introduce any limitations on your final CSS. With Less, you can edit well-structured code instead of changing the effect of the final CSS.

CSS3 introduces many new and handy selectors. One of them is :nth-child(n), which makes it possible to style, for example, every fourth paragraph's p tag in an HTML document. The CSS code for the preceding description will look as follows:

p:nth-child(4n) {
  color:red;
}

Such selectors add powerful functions to CSS3. Nowadays, we are able to perform operations with CSS alone. However, in the past, we needed JavaScript or hardcoded styles (or classes at the very least). Less helps you organize and maintain these new selectors well and this is one of the reasons to learn it. Powerful selectors make CSS more important, but the CSS code also becomes cumbersome and difficult to maintain. Less will prevent this problem in CSS, even making complex code flexible and easy to maintain.

In most cases, many CSS styles can be applied on the same HTML element, but only one declaration for each individual property will win. The properties of an element may come from declarations in different rules. The W3C specifications describe the rules for which CSS styles will get the most precedence and will ultimately be applied. You can find these specifications in the next section.

The rules regarding the order of importance have not significantly changed with CSS3. They are briefly mentioned to help you understand some of the common pitfalls with Less/CSS and how to solve them. Sooner or later, you will be in a situation where you're trying to apply a CSS style to an element, but its effect stays invisible. You will reload, pull out your hair, and check for typos again and again, but nothing will help. This is because in most of these cases, your style will be overruled by another style that has a higher precedence.

The global rules for cascade in CSS are as follows:

As a Less/CSS designer, you will be making use of the calculated CSS specificity in most cases.

How CSS specificity works

Every CSS declaration gets a specificity, which will be calculated from the type of declaration and the selectors used in its declaration. Inline styles will always get the highest specificity and will always be applied (unless overwritten by the first two cascade rules). In practice, you should not use inline styles in many cases as it will break the DRY principle. It will also disable you from changing your styles only on a centralized location and will prevent you from using Less for styling.

An example of an inline style declaration is shown as follows:

<p style="color:#0000ff;">

After this, the number of IDs in the selector will be the next indicator to calculate specificity. The #footer #leftcolumn {} selector has two IDs, the #footer {} selector has one ID, and so on.

Note

Note that in this case, an ID is a unique selector starting with #. The [id=] selector for the same HTML element counts as an attribute. This means that div#unique {} has one ID and div[id="unique"] {} has zero IDs and one attribute.

If the number of IDs for two declarations is equal, the number of classes, pseudo classes, and attributes of the selector will be of importance. Classes start with a dot. For example, .row is a class. Pseudo classes, such as :hover and :after, start with a colon, and attributes, of course, are href, alt, id, and so on.

The #footer a.alert:hover {} selector scores two (one class and one pseudo class) and the #footer div.right a.alert:hover {} selector scores three (two classes and one pseudo class).

If this value is equal for both declarations, we can start counting the elements and pseudo elements. The pseudo elements are defined with a double colon (::) and allow authors to refer to otherwise inaccessible information, such as ::first-letter. The following example shows you how this works.

The #footer div a{} selector scores two (two elements) and the #footer div p a {} selector scores three (three elements).

You should now know what to do when your style isn't directly applied. In most cases, make your selector more specific to get your style applied. For instance, if #header p{} doesn't work, you can try adding a #header #subheader p{} ID, a #header p.head{} class, and so on.

When the cascade and !important rules do not give a conclusive answer, specificity calculation seems to be a difficult and time-consuming job. Although Less won't help you here, tools such as Firebug (and other developer tools) can make the specificity visible. An example using Firebug is shown in the following screenshot, where the selector with the highest specificity is displayed at the top of the screen and the overruled styles are struck out:

An example of specificity in Firebug

The flexbox layout (also called flexible boxes) is a new feature of CSS3. It is extremely useful in creating responsive and flexible layouts. Flexbox provides the ability to dynamically change the layout for different screen resolutions. It does not use floats and contains margins that do not collapse with their content. The latest versions of all major browsers, except from Opera mini, now support the flexbox layouts. Unfortunately, this support is not provided by many older browsers. Information about browser support can also be found at http://caniuse.com/#feat=flexbox.

We will focus on flexbox, due to its power. Also, as it is an important feature of CSS, we can also produce and maintain it using Less. You can access a set of Less mixins for CSS3 flexbox at https://gist.github.com/bassjobsen/8068034. You can use these mixins to create the flexbox layouts with Less, without using duplicate code.

These mixins will not be explained in great detail right now, but the following example shows how Less reduces the code needed to create a flex container. Using CSS, you might use the following code:

div#wrapper {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
}

The preceding example uses the .flex-display (); mixin to set the vendor prefixes for the flex value of the display property. In the Vendor-specific rules section, you will learn more about vendor prefixes and the Less autoprefix plugin. The Less autoprefix plugin makes it unnecessary to use vendor prefixes in your Less code. You can find the Less autoprefix plugin at https://github.com/less/less-plugin-autoprefix. Also, the .flex-display(); mixin becomes unnecessary. Some ancient browsers use an older syntax for the flexbox layout, autoprefixing does not fix old syntaxes and polyfills.

The flexbox grid is a grid system based on the flex display property. This grid system can be used with the Bootstrap grid as a fall back for older browsers. The Less code to build the flexbox grid can be found at https://github.com/bassjobsen/flexboxgrid and the official website of the flexbox grid is http://flexboxgrid.com/.

Flexboxes have been mentioned because they have the potential to play an important role in the future of web design. In Chapter 5, Integrating Less in Your Own Projects, you can read about the flexboxgrid.com and flexible.gs grid systems, which are built with flexboxes. However, this book will mainly focus on creating responsive and flexible layouts with Less using the CSS media queries and the float property.

You can finally start using Less. The first thing you have to do is download Less from http://www.lesscss.org/. In this book, Version 2 of less.js will be used. After downloading it, an HTML5 document will be created. It will include less.js and your very first Less file. Instead of a local version of the less.js compiler, you include the latest version from a content delivery network (CDN). Flexboxes have been mentioned because they have the potential to play an important role in the future of web design. For now, they are beyond the scope of this book. This book will focus on creating responsive and flexible layouts with Less using CSS media queries and grids.

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

Note that you can download the examples from the support files for this chapter in the downloadable files for the book at www.packtpub.com.

To start with, have a look at this plain yet well-structured HTML5 file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Example code</title>
    <meta name="description" content="Example code">
    <meta name="author" content="Bass Jobsen">

    <link rel="stylesheet/less" type="text/css" href="less/styles.less" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>
  </head>

  <body>
    <h1>Less makes me Happy!</h1>
  </body>
</html>

As you can see, a Less file has been added to this document by using the following code:

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

When rel="stylesheet/less" is used, the code will be the same as for a style sheet. After the Less file, you can call less.js by using the following code:

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

Or alternatively, load a local file with a code that looks like the following:

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

In fact, that's all that you need to get started!

To keep things clear, html5shiv (which you can access at http://code.google.com/p/html5shiv/) and Modernizr (which you can access at http://modernizr.com/) have been ignored for now. These scripts add support and detect the new CSS3 and HTML5 features for older browsers such as IE7 and IE8. It is expected that you will be using a modern browser such as Mozilla Firefox, Google Chrome, or any version of Internet Explorer beyond IE8. These will offer full support of HTML5, CSS3, and media queries, which you will need when reading this book and doing the exercises.

Now open http://localhost/index.html in your browser. You will see the Less makes me happy! header text in its default font and color.

After this, you should open less/styles.less in your favorite text editor. The syntax of Less and CSS doesn't differ here, so you can enter the following code into this file:

h1{color:red;}

Following this, reload your browser. You will see the header text in red.

From the preceding code, h1 is the selector that selects the HTML H1 attribute in your HTML. The color property has been set to red between the accolades. The properties will then be applied onto your selectors, just like CSS does.

The less.js file has a watch function, which checks your files for changes and reloads your browser views when they are found. It is pretty simple to use. Execute the following steps:

Pretty cool, isn't it?

As we are only human, we are prone to making mistakes or typos. It is important to be able to see what you did wrong and debug your code. If your Less file contains errors, it won't compile at all. So one small typo breaks the complete style of the document.

Debugging is also easy with less.js. To use debugging or allow less.js to display errors, you can add the following line of code to your index.html file:

<link rel="stylesheet/less" type="text/css" href="less/styles.less" />
<script type="text/javascript">var less = { env: 'development' };</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script><script src="less.js" type="text/javascript"></script>

As you can see, the line with var less = { env: 'development' }; is new here. This line contains less as a JavaScript variable used by less.js. In fact, this is a global Less object used to parse some settings to less.js. The only setting that will be used in this book is env: 'development'. For more settings, you can check http://lesscss.org/#client-side-usage-browser-options.

Since Version 2 of Less, options can also be specified on the script tag, as shown in the following code:

<script src="less.js" data-env="development"></script>

Alternatively, you can use the link tag that refers to your source file, as follows:

<link data-env="development"' rel="stylesheet/less" type="text/css" href="less/styles.less">

To try this new setting, edit less/styles.less again and remove an accolade curly bracket to create an invalid syntax of the h1{color:red form, and then save the file.

In your browser, you will see a page like the following screenshot:

An example of a Less parse error

Besides syntax errors, there will also be name errors displayed. In the case of a name error, an undeclared function or variable would have been used.

It is possible to set other settings for debugging, either in the global Less object or by appending the setting to the URL. For example, you can specify the dumpLineNumbers setting by adding the following lines of code to your HTML file:

<script type="text/javascript">less = { env: 'development',dumpLineNumbers: "mediaQuery"
};</script>

Alternatively, you can add !dumpLineNumbers:mediaQuery to the URL. You can, for instance, open http://localhost/index.html#!dumpLineNumbers:mediaQuery in your browser to enable the setting. This setting enables other tools to find the line number of the error in the Less source file. Setting this option to mediaQuery makes error reporting available for the Firebug or Chrome development tools.

Similarly, setting this to comments achieves the same for tools such as FireLESS. For instance, using FireLESS allows Firebug to display the original Less filename and the line number of CSS styles generated by Less. Older and experimental versions of Chrome did support this mediaQuery format. Currently, most browsers offer support for the CSS source maps, as described in the next section, in favor of other source mapping formats. The current version of Less does not support CSS sourcemap for in-browser usage. When developing in browser with the less.js compiler, you can use the FireLESS add-on for Firefox.

The https://addons.mozilla.org/en-us/firefox/addon/firebug/ path shows that the Firebug add-on integrates with Firefox to put additional development tools, and the FireLESS add-on allows Firebug to display the original Less file name and line number of the Less-generated CSS styles. More information of using FireLESS with the latest version of Less can be found at http://bassjobsen.weblogs.fm/fireless-less-v2/.

Tools like Firebug, or the default Chrome browser development tools, or the default browser used to inspect the elements and functions of your webpage (which you can access by right-clicking on your browser screen) can also be used to see and evaluate the compiled CSS code. The CSS code is displayed as the inline CSS code wrapped inside a <style type="text/css" id="less:book-less-styles"> tag. In the example given in the following screenshot, you will see an ID with the value less:book-less-styles. The values of this ID have been automatically generated by Less, based on the path and name of the book/less/styles.less Less file:

The Less-generated CSS styles

Plugins have been used since Version 2 of Less. They can be used with both the client-side and the server-side compiler. The current list of plugins can be found at http://lesscss.org/usage/#plugins-list-of-less-plugins. Writing a plugin yourself is not that difficult, but beyond the scope of this book. You can be sure that the list of useful plugins will grow over time. Less plugins described in this book only work in a node.js application (including Grunt and Gulp) and sometimes also for in browser usage.

The Less plugins can be grouped into the following four or five types:

To use a plugin with Less in browser, you should first include the plugin source, and then set the plugin option of the less.js compiler. Your code will look like that shown in the following code snippet:

<script src="plugin.js"></script>
<script>
  var less = {
    env: "development",
    plugins: [Plugin]
  };
</script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>

In this book, you will find many code examples. Unless explicitly mentioned, the format of these examples always shows the Less code first, followed by the compiled CSS code. For instance, you can write the following lines of code in Less:

mixin() {
  color: green;
}
p {
  .mixin();
}

This code will be compiled into the following CSS syntax:

p {
  color: green;
}

CSS3 introduced vendor-specific rules, which offer you the possibility of writing some additional CSS applicable for only one browser. At first sight, this seems the exact opposite of what you want. What you want is a set of standards and practicalities that work the same with every browser, and a standard set of HTML and CSS that has the same effect and interpretation for every browser. Actually, these vendor-specific rules are intended to help us reach this utopia. Vendor-specific rules also provide us with early implementations of standard properties and alternative syntax. Last but not least, these rules allow browsers to implement proprietary CSS properties that would otherwise have no working standard (and may never actually become the standard).

For these reasons, vendor-specific rules play an important role in many new features of CSS3. For example, animation properties, border-radius, and box-shadow, depend on vendor-specific rules. You can easily see that some properties may evolve from vendor prefixes to standard. Currently, most browsers support the border-radius and box-shadow properties without any prefix.

Vendors use the following prefixes:

#grad {
  background: linear-gradient(red, blue);
}

#grad {
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
  background: -webkit-linear-gradient(red, blue);
  background: -moz-linear-gradient(red, blue);
  background: -o-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}

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

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

The border-radius property is a new CSS3 property, which will make many web developers happy. With border-radius, you can give the HTML elements a rounded corner. In previous years, many implementations of rounded corners using images and transparency have been seen. However, these were inflexible (not fluid) and difficult to maintain.

Vendor-specific rules are required for implementation, so you will have to compile your code with the Less autoprefix plugin.

To give an element rounded corners with a radius of 10 pixels, you can use the CSS code with vendor-specific rules as follows:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

For rounded corners with different radii, use a list with values separated by spaces: 10px 5px 20px 15px;. The radii are given in the following order: top-left, top-right, bottom-right, and bottom-left. By keeping these rules in mind, you will see how Less can keep your code clean.

You can open roundedcornersbordered.html from the download section of this chapter in your browser, and open less/roundedcornersbordered.less in your text editor. In your browser, you will see a representation of a header, body, and footer with a dark blue border and rounded corners.

The CSS code for header in less/bordered.less looks like the following code:

#header{
  background-color: red;
  border-radius: 10px;
  border: 5px solid darkblue;
}

You can see that the corners have been created with a radius of 10 pixels, set by the border-radius property, and the border itself has been set with the border property. If you were using CSS, you would have to repeat these properties three times for the header, footer, and body. In order to change these rules or add a vendor, you would also have to change the same code three times. To begin with, you might perhaps think, "Why not group the selectors?" in a fashion similar to the following code:

#header, #content, #footer{
  border-radius: 10px;
  border: 5px solid darkblue;-webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

The preceding code is syntactically correct in order to write the CSS or Less code. However, as your code base grows, it won't be easy to maintain. Grouping selectors based on properties makes no sense when reading and maintaining your code. Moreover, such constructs will also introduce many duplicated and unstructured usages of the same selectors.

With Less, you are able to solve these problems efficiently. By creating a so-called mixin, you can solve the issues mentioned earlier. For the border radius, you can use the following code:

.bordered(@radius; @border-color) {
  border-radius: @radius;
  border: 5px solid @border-color;
}

To use the mixin mentioned in the preceding code, you should call it as a property for the selector, using the following code:

#header{
  background-color: red;
  bordered(10px, darkblue);
}

The compiled CSS of this Less code will now be as follows:

#header {
  background-color: red;
  border-radius: 10px;
  border: 5px solid darkblue;
}

Looking at the original code in the less/bordered.less file, you can see that the preceding code wouldn't be able to work for #content. The border radius for the content is 20 pixels instead of 10 pixels, as used for header and footer. Again, Less helps you solve this problem efficiently. Mixins can be called with parameters in the same way as functions can be called in functional programming. This means that in combination with a value and a reference for this value, mixins can be called in order to set the properties. In the following example, this will change to the following code:

.bordered(@radius: 10px; @border-color: darkblue) {
  border-radius: @radius;
  border: 5px solid @border-color;
}

In the .bordered(@radius: 10px; @border-color: darkblue) mixin, the @radius and @border-color variables are your parameters. The default value of the @radius parameter will be 10px and the default value of the @border-color parameter will be darkblue.

From this point onwards, mixins can be used in your code. The .bordered(50px); statement will set the corners with a radius of 50px and the .bordered(); statement will do the same with a radius of 10px and darkblue border color (default).

The same is true for the second @border-color parameter, which has a default value set to darkblue. A .bordered(10px; white); call will set a white border with a radius of 10px. Note that Less supports both a comma and a semicolon as separator for the parameters of the mixins. Using commas can become confusing when your arguments are comma-seperated values (CSV).

Using this, you can rewrite less/borderedmixinsroundedcorners.less so that it changes to the following code:

/* mixins */
.bordered(@radius: 10px; @border-color: darkblue;) {
  border-radius: @radius;
  border: 5px solid @border-color;
}
#header{
  background-color: red;
  .bordered();
}

#content{
  background-color: white;
  min-height: 300px;
  .bordered(20px);
}

#footer{
  background-color: navy;
  .bordered(10px; white);
}

The less/roundedcornersborderedmixins.less file, which is available in the download section, contains a copy of this code. To use this, you also have to change the reference in your HTML file to <link rel="stylesheet/less" type="text/css" href="less/groundedcornersborderedmixins.less" />.

After rewriting your Less code, reload your browser or watch it if you have applied the #!watch trick. You will see that the output will be exactly the same. This shows you how to get the same results with Less, using a more efficiently structured code.

The preceding code will result into an example of a simple layout with borders and rounded corners. The final result should look like the following screenshot:

Layout with borders and rounded corners

A new feature in CSS3 is the possibility of adding a gradient to the background color of an element. This acts as a replacement for complex code and image fallbacks.

It is possible to define different types of gradients and use two or more colors. In the following screenshot, you will see a background gradient of different colors:

A gradient example

In the next example, you can use a linear gradient of two colors. The background gradients use vendor-specific rules.

You can use the example code from the rounded corners example to add gradients to it.

The first step is to copy or open less/gradient.less and add a new mixin at the start of this file, as shown in the following code:

/* Mixin */
.gradient (@start: black, @stop: white,@origin: left) {
  background-color: @start;
  background-image: -webkit-linear-gradient(@origin, @start, @stop);
  background-image: -moz-linear-gradient(@origin, @start, @stop);
  background-image: -o-linear-gradient(@origin, @start, @stop);
  background-image: -ms-linear-gradient(@origin, @start, @stop);
  background-image: linear-gradient(@origin, @start, @stop);
}

This will create gradients going from left (@origin) to right with colors from @start to @stop. This mixin has default values.

IE9 (and its earlier versions) do not support gradients. A fallback can be added by adding background-color: @start;, which will create a uniform colored background for older browsers.

After adding the mixin to your code, you can call on it for our #header, #body, and #footer selectors, as shown in the following code:

#header{
  background-color: red;
  .roundedcornersmixin();
  .gradient(red,lightred);
}
#content{
  background-color: white;
  min-height: 300px;
  .roundedcornersmixin(20px);
  .gradient();
}
#footer{
  background-color: navy;
  .roundedcornersmixin(20px);
  .gradient(navy,lightblue);
}

For example, if you renamed the Less file to less/gradient.less, you would also have had to change the reference in your HTML file to the following code:

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

If you now load the HTML file in the browser, your results should be like the following screenshot:

Gradients in the header, content, and footer from the example code

When working with the large Less code bases, finding the original source can become complex when viewing your result in the browsers. Since Version 1.5, Less offers support for the CSS source maps. The CSS source maps enable developer tools to map calls back to their location in original source files. This also works for compressed files. Both Chrome and Firefox developer tools support the CSS source maps format. Also, Internet Explorer Version 11 supports this format.

Currently, the CSS source maps debugging won't work for client-side compiling, as used for the examples in this book. However, the server-side lessc compiler can generate the useful CSS source maps.

After installing the lessc compiler, you can run the following command:

 >> lessc –source-map=styles.css.map styles.less > styles.css

The preceding command will generate two files: styles.css.map and styles.css. The last line of styles.css now contains an extra line, which refers to the source map as follows:

/*# sourceMappingURL=boostrap.css.map */

In your HTML code, you only have to include the styles.css, as shown in the following code:

<link href="styles.css" rel="stylesheet">

When using the CSS source maps, as described in the preceding code, and inspecting your HTML code with Google Chrome Developer Tools, you will see something like the following screenshot:

Inspect source with Google Chrome Developer Tools and source maps

As you can see, styles now have a reference to their original Less file, such as grid.less, including line number, which helps you in debugging. The styles.css.map file should be in the same directory as the styles.css file. You don't have to include your Less files in this directory too.

The Less plugins can be installed with npm too. The npm plugin is the package manager for Node.js.

To install a Less plugin, you should run the following command on your console:

npm install less-plugin-{plugin-name}

To use an already installed plugin with the command-line compiler, you should use plugin-name as an option for the compiler. Options for the plugin can be set by leveraging the = sign, followed by the list of options.

After compilation, the CSS code is clean and readable. When taking this code into production, you have to compress and minimize it, in order to increase the loading speed and save on the bandwidth as well. The basic steps for compressing and minifying the CSS code are removing comments, whitespaces, and other unnecessary code. The results won't be easy for a human to read. However, this doesn't matter, because you can use the Less files to update or modify the CSS code.

The Less command-line compiler can compress the output when the -comp ress option has been set. This option removes whitespaces. More advanced minification can be done by using the clean-css postprocessor (which you can access at https://github.com/GoalSmashers/clean-css). Before Version 2, the compiler had clean-css built-in. Since Version 2, you have to install the clean-css plugin.

You can install the clean-css plugin by running the following command in the command line compiler:

npm install less-plugin-clean-css

After installing the plugin, you can run the compiler with the –clean-css option as follows:

lessc –clean-css file.less

With clean-css, refer to the following code:

.class1 {
  color: red;
}
.class2 {
  color: red;
}

The preceding code will compile into the CSS code, as the following code shows:

.class1,.class2{color:red}

As you can see, clean-css also merges the selectors. For advanced optimization of your code, which includes selector merging, you should run the clean-css plugin with the advanced option as follows:

lessc --clean-css="advanced" file.less

Also, Pleeease is a CSS post-processor, which can be used to run different post-process once. Pleeease, among others, runs the autoprefixer plugin, provides a fallback for the em units, and can merge media queries. A Pleeease plugin for Less is available, too.

You can read more about Pleeease at http://pleeease.io/.

When you are ready to start your first Less project, you should consider creating a build process that compiles your Less files into the CSS code automatically. Grunt and Gulp are task runners for Node.js. You can use these task runners to compile your Less code automatically and run postprocessors for the compiled CSS code.

The task runners can also be configured to detect file change and trigger browser reloads. Your final build system can show your changes directly after saving. Also, in the browser, development will be possible.

Gulp is relatively new in comparison to Grunt, so Grunt has more plugins and wider community support. Currently, the Gulp community is growing fast. The biggest difference between Grunt and Gulp is that Gulp does not save intermediary files, but pipes these files' content in memory to the next stream. A stream enables you to pass some data through a function, which will modify the data, and then pass the modified data to the next function. In many situations, Gulp requires less configuration settings, and so some people find Gulp more intuitive and easier to learn.

In this section, you will learn how to set up a build system with Gulp. Note that you can use the same strategies to do the same with Grunt. Those who are interested in build systems with Grunt can inspect the default build system of Bootstrap. You can read more about Bootstrap in Chapter 6, Using the Bootstrap 3 Frontend Framework. The Bootstrap source code contains a build system that compiles the code automatically leveraging Grunt.

To use Gulp, you should install Node.js first. As already mentioned, npm is bundled with Node.js. So, after installing Node.js, you can run the following commands in your working directory to install Gulp:

npm install -g gulp
npm install --save-dev gulp

After installing Gulp, you have to create a Gulpfile.js file in your working directory. The Gulpfile.js file defines the task that it should perform on your files when running the gulp command. Your first Gulp file will look like that shown in the following code:

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('default', function () {
  gulp.src('./less/project.less')
  .pipe(less())
  .pipe(gulp.dest('./css'));
});

Now you can run the grunt command in the console, which will compile the Less code of the ./less/project.less into the ./css/project.css file. The basic build system uses the gulp-less plugin to compile your Less code. You can add more plugins such as gulp-sourcemap and gulp-autoprefixer in order to bring your build system to the next level.

The gulp-less plugin enables you to use the Less plugin, too. Using the Less plugins, instead of the gulp plugins, for tasks will simplify your Gulp configuration. You can use the task configuration shown in the following code to compile your Less code with sourcemaps, and the clean-css and autoprefixer postprocessors:

var gulp = require('gulp');
var less = require('gulp-less');
var sourcemaps = require('gulp-sourcemaps');
var LessPluginCleanCSS = require("less-plugin-clean-css"),
cleancss = new LessPluginCleanCSS({advanced: true});

var LessPluginAutoPrefix = require('less-plugin-autoprefix'),
autoprefix= new LessPluginAutoPrefix({browsers: ["last 2 versions"]});

gulp.task('default', function () {
  gulp.src('./less/project.less')
  .pipe(sourcemaps.init())
  .pipe(less({
    plugins: [autoprefix, cleancss]
  }))
  .pipe(sourcemaps.write())
  .pipe(gulp.dest('./css'));
});

Finally, you can consider extending your build system with gulp-livereload. The gulp-livereload plugin can be used with the livereload Chrome extension. The livereload extension enables you to see the compiled version of your code in your browser directly after saving and opens the way to in browser development too. You can read more about livereload at http://livereload.com/.

Some of you will prefer to use a Graphical User Interface (GUI) instead of command-line compiling. There are many GUIs available for different platforms that can edit and compile your Less code. All of them cannot be mentioned here. Instead, here is a list of the most positive noticeable ones:

When choosing a GUI for Less development, always check which version of less.js it uses. Some GUIs are built on older versions of less.js and don't support the latest features.

Web developers using Visual Studio should check out Web Essentials. Web Essentials extends Visual Studio with a lot of new features, including Less. Also, other IDEs such as PHPStorm have the built-in Less compilers. There is also a Less plugin for Eclipse.