> Web Development Blog
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 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.
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 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 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.
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
When pre-compiling LESS with SimpLESS, you have the option to minify your CSS, this greatly improves the loading time of your websites.
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.