Compiling Less
After delving into the theory of CSS, you can finally start using Less. As mentioned earlier, it has the same syntax as CSS. This means any CSS code is, in fact, a valid Less code too. With Less, you can produce CSS code that can be used to style your website. The process used to make CSS from Less is called compiling, where you can compile Less code via the server side or client side. The examples given in this book will make use of client-side compiling. Client side, in this context, means loading the code in a browser and compiling Less code into CSS code using resources from the local machine. Client-side compiling is used in this book because it is the easiest way to get started while being good enough for developing your Less skills.
Tip
It is important to note that the results from client-side compiling serve only for demonstration purposes. For production and especially when considering the performance of an application, it is recommended that you use server-side precompiling. Less bundles a compiler based on Node.js, and many other GUI's are available to precompile your code. These GUI's will be discussed towards the end of this chapter.
Getting started with Less
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 1.6 of less.js
will be used. After downloading it, an HTML5 document should be created. It should include less.js and your very first Less file.
Please note that you can download the examples, including a copy of
less.js, from the support files for this chapter in the downloadable files for the book on 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="less.js" type="text/javascript"></script> </head> <body> <h1>Less makes me Happy!</h1> </body> </html>
As you can see, a Less file has been added to this document 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 using the following code:
<script src="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 detection of 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.
Tip
You already know you should only use less.js for development and testing in most cases; there can still be use cases which do justice to the client-side use of less.js in production. To support less.js for older browsers, you could try es5-shim (https://github.com/es-shims/es5-shim/).
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 should 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.
Tip
It is not necessary to have a web server that is running. Navigating to index.html on your hard drive with your browser should be enough. Unfortunately, this won't work for all browsers, so use Mozilla Firefox in order to be sure. The examples in this book use http://localhost/map/, but this can be replaced with something similar to file:///map/ or c:\map\, depending on your situation.
Using the watch function for automatic reloading
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:
Add
#!watchafter the URL you want to open.Add
#!watchafterindex.htmland then reload the browser window.So, open
http://localhost/index.html#!watchin your browser and start editing your Less files. Your browser will reflect your changes without having to reload.Now open
less/styles.lessin your text editor. In this file, write#h1{color:red;}and then save the file.You should now navigate to your browser, which should show Less makes me Happy! in red.
Rearrange your screen in order to see both the text editor and browser together in the same window.
Furthermore, if you change
redtoblueinless/styles.less, you will see that the browser tracks these changes and shows Less makes me Happy! in blue once the file is saved.
Pretty cool, isn't it?
Tip
The examples in this code use color names instead of hexadecimal values. For example, the code uses red instead of #ff0000. The basic color names are converted to their hexadecimal value by less.js and written to the CSS. In this book, named colors are always used.
Debugging your code
As we are only human, we are prone to making a mistake or a typo. 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:
<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>As you can see, the line with 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, check out the following website: http://lesscss.org/#client-side-usage-browser-options.
Tip
env: 'development' also prevents Less from caching. Less doesn't cache files in the browser cache. Instead, files are cached in the browser's local storage. If env is set to production, this caching could yield unexpected results as the changed and saved files are not compiled.
To try this new setting, edit less/styles.less again and remove an accolade 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 that are 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. 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 .
FireBug, Chrome development tools, or the default browser inspect the element functions (which you can access by right-clicking on your browser screen) can also be used to see and evaluate the compiled CSS. The CSS is displayed as inline CSS 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 value less:book-less-styles. The value of this ID have been automatically generated by Less based on the path and name of the book/less/styles.less Less file:
Less-generated CSS styles
Example code used in this book
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;
}
