How to get SCSS and LESS files to open in Dreamweaver
20 March 2012
Dreamweaver doesn't recognize .SCSS (sass) and .LESS files and if you get it to open the file it doesn't highlight the code. Syntax highlighting is very desirable when working in stylesheets. You can enable this in a few easy steps.
This goes for windows, and doing the same steps on a Mac shouldn't be that hard. Only the paths to the files are different, the idea is the same.
1. Close Dreamweaver
2. Open notepad as adiminstrator and open the file "MMDocumentTypes.xml" in this directory:
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes
3. Find this line:
4. Change this line to:
5. Save the file.
6. Open another file in notepad as administrator. The file is named "Extensions.txt" and is one directory up, in:
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\configuration
7. Find this line:
CSS:Style Sheets
8. Change it to:
CSS,SCSS,LESS:Style Sheets
9. Save the file and open another file with the same name "Extensions.txt" at this location, where [username] is your windows username:
C:\Users[USERNAME]AppDataRoamingAdobeDreamweaver CS5en_USConfiguration
10. Repeat step 7 and 8 and save the file.
11. Open dreamweaver and it should all work fine now.
This goes for windows, and doing the same steps on a Mac shouldn't be that hard. Only the paths to the files are different, the idea is the same.
1. Close Dreamweaver
2. Open notepad as adiminstrator and open the file "MMDocumentTypes.xml" in this directory:
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\configuration\DocumentTypes
3. Find this line:
<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css">
4. Change this line to:
<documenttype id="CSS" internaltype="Text" winfileextension="css,less,scss" macfileextension="css,less,scss" file="Default.css" writebyteordermark="false" mimetype="text/css">
5. Save the file.
6. Open another file in notepad as administrator. The file is named "Extensions.txt" and is one directory up, in:
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5\configuration
7. Find this line:
CSS:Style Sheets
8. Change it to:
CSS,SCSS,LESS:Style Sheets
9. Save the file and open another file with the same name "Extensions.txt" at this location, where [username] is your windows username:
C:\Users[USERNAME]AppDataRoamingAdobeDreamweaver CS5en_USConfiguration
10. Repeat step 7 and 8 and save the file.
11. Open dreamweaver and it should all work fine now.
You must have JavaScript enabled to use this form!
25 comments
New on Dreamdealer
Behind the scenes: CSS-only Clock
Intelligent image cropping with focal point
image-rendering: pixelated
Don't forget about inherit
Are you still using PX for font sizing?
Share this page
About the author
This post was writen by Johan van Tongeren, owner of this website. Johan is a professional frontend developer and an amateur petrolhead. This website is his personal playground which changes almost every day. More...
Anshul
18 June 2013Thanks, I have windows 8, cs6 it worked fine, using step 12 & 13.
Thanks a ton.
happy
17 June 2013Ooh, extra credit. With Mac OS X and Dreamweaver CS5.5
To get coding color hints, edit this file:
~/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/DocumentTypes/MMDocumentTypes.xml
Repeat steps 3-4.
I'm sure with windows, that path is similar to the path listed in step 9 of this tutorial.
Actifuse
15 June 2013Thnx. The first website to explain it step by step. However i did not find step 9. Left it as it is and just opened dw. seems to work fine.
lesscss
09 April 2013nice topic and easily better way
http://lesscsstutorial.com
Chat Blanc
01 April 2013I did the same as top cat, on my DW CS6 and it finally work!
Thank you top cat, the 12 and 13 step was all i needed!
Unfortunally I can use only dreamweaver on my work. But if you guys are able to code with another software, i suggest you to use Sublime Text 2.
Its a lot way easier to achieve the highlight sintax for .less on it (is only a checkbox omg!)
Miroslav Zografski
19 March 2013Enable full support for LESS in Dreamweaver
http://www.dmxzone.com/go/21528/dmxzone-less-css-compiler/
Topcat
01 March 2013On my setup at least (Win7, DW CS5.5) I had to edit a fourth file to make this work. As mentioned in the instructions, there are two copies of the Extensions.txt file to be edited, but there are also two copies of MMDocumentTypes.xml as well.
So, the additional steps are:
12. Open notepad as adiminstrator and open the file "MMDocumentTypes.xml" in this directory:
C:\Users\[USERNAME]\AppData\Roaming\AdobeDreamweaver CS5\en_US\Configuration
13. Repeat steps 3, 4 & 5 with this file.
Boac
18 January 2013Thanks
TheFrosty
18 December 2012This extension worked great: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522#
Nikhil
21 November 2012I follow all the steps given but not getting result.I have restarted Dreamweaver as well as Computer,what should i do?
Do you have another solution?