LESS/SCSS Syntax Highlighting in Dreamweaver

Posted By: Mark Aplet 16 Comments August 17, 2010

I started using less css a short while ago and really like having variables and nesting options for css.  The only real downside was Dreamweaver's inability to apply syntax highlighting to files it does not understand. Thankfully the solution is pretty easy and takes only a few seconds.

NOTE: This technique modifies the core configuration files used by Dreamweaver so be sure to make a copy of the file and store it in a safe place until your certain things are working correctly.

We will be modifying the document called MMDocumentTypes.xml located here:
Macintosh HD/Applications/Adobe Dreamweaver CS?/configuration/DocumentTypes/MMDocumentTypes.xml

Windows users, the configuration file is called the same thing, and is located here:
C:\Program Files\Adobe\Dreamweaver CS?\Configuration\DocumentTypes\MMDocumentTypes.xml

Edit the file in a plain text editor. You can use Dreamweaver if you like. You will need to restart Dreamweaver before the changes take effect.

Do a find for "CSS" and modify the either macfileextension="css" and/or winfileextension="css" to include the less file extension. it should look like macfileextension="css,less" when your done.

Also note. If you use Sass you can also add in the scss extension and use the longer scss notations, but the shorter sass extension offers no syntax highlighting since it does not contain the curly braces like css does.

Now save the file and restart Dreamweaver and open your less file and you will see all the syntax highlighting just as you would with traditional css.

Related Entries:

Tags: CSS · Software

16 comments so far ↓

  • 1 Jordan Lowe // Oct 12, 2010 at 8:24 AM
    Dreamweaver still wouldn't open the file for me. It said "Can't find a valid editor for this type of file extension". I came upon this fix from Adobe:
    http://kb2.adobe.com/cps/164/tn_16410.html
  • 2 Mark Aplet // Oct 12, 2010 at 8:31 AM
    That adobe page basically outlines the same thing I posted in my article. Thanks for the link in case somebody else is having similar issues.
  • 3 Katie // Jan 23, 2011 at 5:49 PM
    Thanks a bunch. Just a note for Vista users: because of security in Vista, you won't be able to save straight into the folder. You'll need to save it elsewhere, move the original to another location for safe-keeping, then move the edited version into the DW folder.
  • 4 Ivan // Jun 17, 2011 at 1:45 AM
    Thanks, Mark, the only pity is that nested culry braces are still strangely highlighted

    @Katie: you can also run your text editor as Administrator, then it can be saved
  • 5 Edan // Aug 24, 2011 at 7:35 AM
    Thanks for the tip!
    I just had one issue - I created a backup of MMDocumentTypes.xml in the DocumentTypes folder called 'MMDocumentTypes_BACKUP.xml'. With this file left in the DocumentTypes folder, Dreamweaver showed a bunch of errors on opening, and sytax highlighting didn't work for LESS files.
    I move the backup file out of the folder, and everything worked fine.
  • 6 Simon // Sep 6, 2011 at 1:53 AM
    You can now compile .less files to .css directly from within Dreamweaver with a free (donation-ware) plugin:

    http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2692522
  • 7 Mark Aplet // Sep 6, 2011 at 7:44 AM
    Thanks for the link Simon.
  • 8 Charlie // Sep 15, 2011 at 12:38 AM
    hmm... I made the changes you described but dreamweaver still doesn't seem to recognise .scss files. according to the code coloring category of the preferences menu (EDIT > PREFERENCES) they're still recognised as plain text.

    anyone know what might be going on?
  • 9 charlie // Sep 23, 2011 at 1:03 AM
    ah ha!
    It turns out this problem is specific to those of us running cs5.5 in windows 7 (64-bit). if you made the changes listed above and it still isn't working, you need to also edit the MMDocumentTypes file located at:
    C:\Users\<USER>\AppData\Roaming\Adobe\Dreamweaver CS5.5\en_US\Configuration\DocumentTypes\MMDocumentTypes.xml

    here's where I found the solution.
    http://forums.adobe.com/thread/861133
  • 10 Rom // Oct 7, 2011 at 8:24 AM
    Aaah thanks Charlie it was driving me mad!

    All fixed now :)
  • 11 Dave // Oct 13, 2011 at 4:16 PM
    I'm using Dreamweaver CS5.5 on a Mac and cannot get this to work. I've tried all of the suggestion.
    Any thoughts?
  • 12 Cooper // Nov 16, 2011 at 4:42 PM
    I'm in the same boat as Dave. I've spent over an hour researching this and tinkering with the configuration files for Dreamweaver, still can't get it to work. Another tutorial I found says you need to edit the Extensions.txt file and add LESS to it as well, still didn't work for me. Any solutions for CS5.5 on Mac would be really awesome.
  • 13 Seybsen // Nov 26, 2011 at 6:08 AM
    As mentioned in adobe's technote you can add the new filetype (.less or .scss) in the Extensions.txt-File:

    C:\Users\<USER>\AppData\Roaming\Adobe\Dreamweaver CS5.5\en_US\Configuration\Extensions.txt

    Edit the line containing ":Style Sheets" like this:
    CSS,LESS:Style Sheets
  • 14 Mark S // Jan 30, 2012 at 12:14 PM
    Had a tough time getting this working. I found an answer on Adobe's forums. For Mac users, there are TWO configuration folders (at least for DW5.5 on Lion). So two sets of identical files, four in total files, have to be changed.

    ~/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/DocumentTypes/MMDocumentTypes.xml
    ~/Library/Application Support/Adobe/Dreamweaver CS5.5/en_US/Configuration/Extensions.txt

    - and -

    Adobe Dreamweaver CS5.5/Configuration/DocumentTypes/MMDocumentTypes.xml
    Adobe Dreamweaver CS5.5/Configuration/Extensions.txt

    only after modifying all four documents did the .LESS file read correctly in DW code editor.
  • 15 Mark Aplet // Jan 30, 2012 at 12:41 PM
    Thanks Mark for that update.
  • 16 Dave // Jan 30, 2012 at 1:53 PM
    Woohoo! It worked!!!

Leave a Comment

Leave this field empty:

Theme Design By Mark Aplet

Super Powered by Mango Blog

amazing