How to use LESS code in Dreamweaver

How to use LESS in Dreamweaver, first we have to modify some Dreamweaver configuration files. There will be 2 files lets get started with the first.

ALWAYS BACK UP FILES BEFORE changing.
1. Open C:\Users\What Ever Your User Name Is\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration\Extensions.txt

 
2. In the Extensions.txt add less to the CSS line as it is above, comma separated values.
3. Open C:\Users\What Ever Your User Name Is\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration\DocumentTypes\MMDocumentTypes.xml

 
4. On line 142 add less to winfileextension and macfileextension as shown above.
5. Close and restart Dreamweaver.

6. Now 

when you open a .LESS file it will have the code coloring as well as CSS code hints as above.
Keep in mind you will need something to compile it, So here our a few LESS compilers.

 SimpLESS http://wearekiss.com/simpless 
WinLESS http://winless.org/ 
PreProshttp://alphapixels.com/prepros/

I personally love the last one.
So now all you have to do is attach the style.css that the compiler outputs and you can use LESS in Dreamweaver. So write your css in the style.less and attach the style.css in the head of your HTML document.

Happy Coding!

 

 

Share on Google Plus

About Amit

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.