Learning LESS: Divide and Conquer

Alex Ball is getting to the end of his Learning LESS series, and this is one of the posts he is most excited about. One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler). If you haven’t read the first four posts on the topic, check out the variables, mixins, nested rules and using Functions posts.

The absolute first LESS file Alex Ball creates in any project is simply style.less. This is the file that will be compiled to be style.css, and act as the master CSS file for his entire project. It is important to remember that comments in LESS are double backslashes (//) and are not compiled in the final CSS. So, not much going on in that file … yet. Moving on to our next LESS file. Now! Let’s get to the absolute beauty of LESS. So you want to include the reset in your final CSS style sheet, right? All you have to do is import it using one line of code. You can quickly see how keeping your LESS files separate can amazingly speed up development because you already have a reset file at your disposal for every project. There’s no need to go searching for a CSS reset every time you want to get started on a project, you just import the reset.less sheet!