Speed up responsive webdevelopment with CSS Less (Windows): for beginners

Update October 2021

This is horribly outdated. You’d better search for a SCSS-solution. But hey, maybe you have an old project you need help on…

You probably already know Less, the CSS “pre-processor”. Basically Less does exactly what it’s called: you can create your css-files with less typing.

The true advantages of Less are that you can use variables and so-called “Mixins”, which are functions/sets of code you use multiple times in your css. Forget about browser-prefixes and typing a whole set for a simple border-radius, just make use of the mixins.

To get started in a few minutes:

1. If on Windows, download and install WinLess, a neat and handy GUI which will parse your less-files into CSS and minify them on the fly (automatically, everytime you save your file)
2. Add the folder you are keeping your Less-files in (your css directory).
3. Create a Less-file (e.g. all.less), with for example the following contents.

I use a less boilerplate (all.less) for my new projects as following:

/* Default functions */
@import "mixins";

/* Use your preferred reset stylesheet! e.g. http://git.io/normalize */
@import (inline) "reset.css";

/* Any plugin CSS-files here, e.g. font-awesome */
@import (inline) "font-awesome/font-awesome.min.css";

/* All the basic styles, mobile first */
@import "basic"; /* refers to a file called basic.less, which you create yourself */

/* Tablets */
@media screen and (min-width:768px) { 
	@import "res_768"; /* refers to a file called res_768.less, which you create yourself */
}

/* Desktop */
@media screen and (min-width:978px) {
	@import "res_978"; /* refers to a file called res_978.less, which you create yourself */
}

/* Large Desktop */
@media screen and (min-width:1200px) {
	@import "res_1200"; /* refers  to a file called res_1200.less, which you create yourself */
}

Create your own mixins.less file or use a template, like the one on lesselements.com.

In your imported stylesheets (basic.less, res_768.less etc) also place the first line @import "mixins"; to make sure WinLess finds your mixins.

Now start your work in basic.less (mobile-first approach) and keep a clean structure as for example:

header { }

.mainContainer {
	section {
		position: relative;
		.entry-content {
			p {
				margin: 0 0 1em 0;
	
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}

	aside { }
}

footer { }

You will notice that all.less is generated into all.css, which contains all the minified css, including the responsive css. Optimized for production right away!
Good luck!