LUCiD GRAFiX Logo

Tutorial
YouTube RSS Feed
Search

TUTORIAL

How to use LESS in Dreamweaver

Written by Posted on October 11th, 2013 1 Comment
Share This

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

How to use LESS in Dreamweaver

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

How to use LESS in Dreamweaver

4. On line 142 add less to winfileextension and macfileextension as shown above.

5. Close and restart Dreamweaver.

How to use Dreamweaver with SASS and LESS

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!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

CSS3 Animation Basics CSS3 Animation Basics
CSS Specificity CSS Specificity
jquery animated menu jQuery Animated Menu
Leave a comment

One Response

  1. Margaret says:

    Thank you so much!!!

Leave a Reply