Book Image

Less Web Development Essentials

By : Bass Jobsen
Book Image

Less Web Development Essentials

By: Bass Jobsen

Overview of this book

Less is a CSS preprocessor that essentially improves the functionality of simple CSS with the addition of several features. The book begins by teaching you how Less facilitates the process of web development. You will quickly then move on to actually creating your first layout using Less and compiling your very first Less code. Next, you will learn about variables and mixins and how they will help in building robust CSS code. In addition, you'll learn how to keep your code clean and test it by using style guides. We will then move on to the concept of Bootstrapping and the strength of using Less with Twitter Bootstrap. Going one step further, you will be able to customize Twitter's Bootstrap 3 using Less. Finally, you will learn how to integrate Less into your WordPress themes and explore other web apps that use Less. By leveraging this powerful CSS preprocessor, you will be able to consistently produce amazing web applications while making CSS code development an enjoyable experience.
Table of Contents (15 chapters)
Less Web Development Essentials
About the Author
About the Reviewers


Before you dive into this book, let me give you a little bit of background. In the summer of 2009, I was writing CSS for a project of mine and had developed a habit of questioning every piece of technology I used. I enjoyed CSS for the most part, but one thing bothered me: I couldn't experiment like I wanted to. I was designing a lot back then, and I strongly believed in designing directly in the browser. This meant being able to change the overall tone and style of the page quickly to try different ideas. With the usual way of organizing CSS, this can be difficult. You have to keep classes small and "composable", shifting the burden to the HTML. CSS is great when you need to translate an existing, final design to the Web. However, that's not how things work very often. More and more designers are jumping straight into CSS, closing the gap between design and implementation, and they need a tool that they can use all the way through, from ideation to finished product.

I started thinking of workarounds such as separating colors from other properties so that all classes that were of the same color would be defined together. However, I wanted colors to depend on other colors; I wanted to describe the theme as "relationships" between colors, not static values. I wanted to turn a knob and have the page change from one look to another. This was plainly impossible with the CSS of 2009. I looked for solutions in the form of preprocessors and found a few, but most of them were doing too much; they were fixing things that weren't broken, such as the core syntax of the language that I happened to like.

So, I decided to put something together that would do what I wanted; the first version of Less was born. It was quickly apparent that I wasn't the only one looking for something like this. The idea was simple, but it was a step in the right direction.

Five years later, looking back at this is interesting. If I had run into these problems with the experience I have today, would I have followed the same path? I think my intuition was correct, but never could I have predicted how difficult it is to get something like this right. It's one thing to design something for yourself; it's a completely different thing when it has to work for everyone. This has made me appreciate the quality of the work that went into the CSS specification all the more, as well as the working group's cautiousness in moving forward.

It's important to remember that Less is an extension of CSS, and much of the power of Less comes from its support for plain CSS. It's easy to forget when you have access to all the extra capabilities. However, those who know when and how to use both technologies will enjoy the greatest flexibility and control over their creations.

Alexis Sellier


Creator of Less