Preface

After the introduction of HTML 4.01 in 1999, the Web changed fast. Many new devices such as tablets and mobile phones saw the light of day. Mobile Internet became faster, cheaper, and more stable. The W3C started the HTML5 working group in 2007. In December 2012, W3C designated HTML5 as a candidate recommendation. HTML5 works with CSS3. Today, all major browsers (Chrome, Safari, Firefox, Opera, IE) offer HTML5 support.

The impact of CSS3 has been huge. Nowadays, CSS3 is not only used to style your HTML documents, but CSS3 also plays an important role in the responsibility of your designs. Last but not least, CSS3 extends CSS with features such as animations and transitions.

We don't need external flash components for complex animation. Take a look at http://www.hongkiat.com/blog/css3-animation-transition-demos/ or look at the funny owl in the following screenshot:

The owl in the preceding screenshot has been built with HTML5 and CSS3 alone. The live version can wink and look by pressing the buttons.

Responsive designs allow you to build one version of your website with only one code base which functions well and looks good on different devices such as mobile phones, tablets, and desktops. There won't be any technical reason to build different mobile and desktop versions, as shown in the following screenshot:

With all this new stuff, the work of the CSS (or web) developer becomes more complex. A web developer needs to know about complex CSS3, the difference between browsers and devices, animations, and other style effects. Writing correct and functional CSS code will be the first thing; keeping this code readable, maintainable, and working on all major browsers will be the second thing. CSS files grow and become untidy in the development and maintenance processes. CSS doesn't have the ability to modify the existing values or reuse common styles. Also, doing math or defining variables is not possible in CSS. This is where Less comes into the frame.

Less (Leaner CSS) is a dynamic stylesheet language designed by Alexis Sellier. Started in 2010, it is now maintained and extended by the Less core team. Less helps you make your CSS code maintainable, reusable, and prevent code duplications.

In this book, you will learn how to write, compile, and understand Less. We will help you do faster and more cost-effective web development. You will get practical tips to integrate Less in your current and new projects. After reading this book, you will write clear and readable CSS3 with Less. Instead of spending your time on debugging your complex CSS code for a specific device or browser, you can pay more attention to your real design tasks.

Your clients will be happy with your advanced and stable designs. This will reduce the development and maintenance time and hence the cost of designing.

Less extends CSS with functions and variables. In a semantic sense, valid CSS is also valid Less. The initial versions of Less were written in Ruby; now, Less is written in JavaScript.

Less is called a CSS precompiler. This means that the end product will be used for production. The end product in this case will be valid, compact, and readable CSS code. Besides, the precompiling Less code can also compile in real time. Less offers server-side and client-side options to do this. Real-time client-side compilation via LESS.js in a modern web browser makes testing easy. Server-side compilations offer opportunities to build applications with Less as well as create dynamic CSS.

Also, others know the power of Less. Projects such as Twitter's Bootstrap and Roots, a WordPress starter theme, both rely on Less. These projects build clear and extendable frameworks with Less. You can't ignore this proof. Stop writing cumbersome CSS with bugs and browser defects and learn about Less by reading this book.

Less is open source and licensed under the Apache license. At the time of writing this book, the latest version is 1.7. The source code of Less will be maintained on GitHub. Everybody will be allowed to contribute to it. You can use Less free of charge.