> Web Development Blog

Using Less CSS with Dreamweaver

How to use LESS CSS with Dreamweaver

LESS CSS is one of the easiest ways to start compiling your CSS. So what is compiling and why would we want to do it? After all, CSS is hardly rocket science to write is it?

Why you should compile your CSS:

Ever found yourself in a situation where you have forgotten the #hex code for the colour your working with? Tired of having to write vendor prefixes for your fancy CSS3 rules over and over again? Wish you could create variables, functions, mixins and operators inside your CSS code to handle all those little annoying things that other web languages don't suffer from? Then using LESS CSS is the way forward for you!

Wish you could create variables, functions, mixins and operators inside your CSS code to handle all those little annoying things that other web languages don't suffer from? Then using LESS is the way forward for you!

So how does compiling LESS CSS actually work?

LESS was developed by Alexis Sellier, his idea was to allow you to use common programming elements such as variables, mixins and functions within your usual CSS mark up, and then allow that extra mark up to be compiled into regular CSS code that your browser can understand. You write your LESS / CSS in a .less file, which then needs to be compiled into a .css file.

Compiling your code is nothing new, languages like C, Java and Pascal have been compiled for years, but the idea of doing so can be a little daunting for people usually work with scripting and mark up languages like HTML and Javascript. The reality however is that compiling CSS is very simple to do. In fact you don't even need to understand what compiling is to use LESS.

Compiling your LESS CSS with SimpLESS

Currently there are a number of ways to compile your CSS code. One of the easiest tools I have found is something called SimpLESS. All you do is download and install the programme, open it up and drag and drop the .less files you want to work on into it. From now on, as long as SimpLESS is open in the background, anytime you save the .less file, it will automatically compile the file in .css format.

Your HTML markup remains the same, you would still link the relevant stylesheets as .css in your document head, but you would work on the .less file, allowing SimpLESS to do the compiling for you in the background.

This method of working is known as pre-compiling, because you are compiling the LESS into CSS before the browser reads it. There is another method using Javascript that allows browsers to compile LESS into CSS on the fly. However this raises a number of problems for the user, and its better practise to pre-compile your LESS mark up into CSS. Other more advanced server side methods can be used to compile your LESS mark up, but these are not covered in this tutorial.

Using LESS with Dreamweaver

As of Feb 2013, Dreamweaver (currently version CS6) does NOT support working with .less files. However a number of extensions have been released that allow you to work on .less files from within Dreamweaver as if they were normal .css files. My favourite is this one which is free to download.

What can I do with LESS CSS?

Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.

Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments.

Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

Functions & Operations
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colours, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.

Minify CSS
When pre-compiling LESS with SimpLESS, you have the option to minify your CSS, this greatly improves the loading time of your websites.

Includes
With LESS you can create one CSS file, broken down into sections. This limits the amount of HTTP requests the browser has to make, which greatly improves the loading time of your websites.