Thu
29
Mar '12

Using Dreamweaver with Sass and Less

When my wife, Stephanie Rewis, decided to leave the gun-for-hire world and join a start-up, she was immediately faced with a decision on which CSS preprocessor to use – Sass or Less. And compounding the problem, her editor of choice, Dreamweaver, doesn’t provide color coding or hinting for either preprocessor – even though their files are really just CSS. So, being the good husband (and evangelist for Dreamweaver) that I am, I set out to remedy the problem. If you’re wanting to use Sass or Less with Dreamweaver, here’s how to make it work.

As always, here’s the disclaimer – you’re going to be editing files in Dreamweaver’s Configuration folder, so proceed with caution, make a backup of the originals, etc.

The first thing that we need to do is to tell Dreamweaver that it’s okay to open a .scss or .less file – something that Dreamweaver by default doesn’t understand. You’ll first need to take a peak in your personal Dreamweaver configuration folder – on a Mac, that’s located in ~username/Library/Application Support/Adobe/Dreamweaver CS5.5/en_us/Configuration – and locate a file named “Extensions.txt”. If, for some reason, this file doesn’t exist, you can edit the master file located in Adobe Dreamweaver CS5.5/Configuration. Open the file and add SCSS (or SASS if you’re using the older syntax) and LESS to line 8, so that it reads: CSS,SCSS,LESS:Style Sheets. Save the file and restart Dreamweaver. You should now be able to click on a .scss or .less file in your Site panel and have it open in Dreamweaver.

Now, in order for Dreamweaver to understand that this, in fact, is a CSS file, you’ll need to edit MMDocumentTypes.xml located in the DocumentTypes folder in the Configuration folder. Open this file and scroll down to line 142. You’ll notice two properties on that line: winfileextension=”css” macfileextension=”css”. Add scss and less (comma seperated) to the appropriate property for your platform. Save the file and restart Dreamweaver. Open your .scss or .less file and you should see your familiar CSS code coloring and hinting!

If you’re serious about your Sass and/or Less, you should be using CodeKit, IMHO. CodeKit, in addition to other things, monitors your scss (or less) file for changes and then compiles it into CSS. I’m using CodeKit and Sass on every project – and loving it! To optimize my workflow, I actually link to the .scss file in my HTML (just remember to remove it before pushing the page live). That way, I can use Dreamweaver’s split view to edit the .scss file while looking at the page with Live View turned on. When I save the .scss file, CodeKit compiles the file into a CSS file that is also linked in my page. Sadly, Dreamweaver doesn’t know when the CSS file is changed, but simply hitting F5 (or the refresh button at the top of the document window) causes Dreamweaver’s Live View to refresh and I can see my changes.

38 Comments »

38 Responses to “Using Dreamweaver with Sass and Less”

  1. The Web Moves Fast « Prototype A Says:

    [...] Well, Greg Rewis, Adobe Dreamweaver evangelist and co-keynoter for the upcoming Designer/Developer Workflow Conference, outlined the steps necessary to tweak some config files in Dreamweaver and be coding away. Here is the full article. [...]

  2. Samiullah Says:

    Could you write same tutorial for window user?

  3. chris Says:

    @Greg thanks for the tutorial. Just starting out with Sass after years and years of hand-coding all of my CSS. Hard to teach old dogs new tricks. lol

    Curious about CodeKit. If you don’t mind sharing your thoughts on it and what it has done for you in regards to productivity and efficiency, hit me up via email.

  4. jeff Says:

    Thanks for this. Before I jump, is this in Lion?
    I’d like to know more about Codekit too, like how to make it link with Dreamweaver as you mentioned above. Obviously I know little.

  5. lagoa dos ingleses Says:

    Very good article, thank your wife for being willing to teach you to use Sass, Dreamweaver does not actually color code, did not know what to do, thanks

  6. Richard Says:

    I have Dreamweaver CS4. Does this work for CS4 on a PC?

  7. S. Yam Says:

    Just what I wanted to know. Though I configured on Windows, the instructions were easily translated.

    *Windows Path –> C:\Program Files\Adobe\Adobe Dreamweaver CS5.5\configuration\
    *Notepad (built in editor) – You may need to save any .txt files altered in administrator mode –> right-click on your Notepad icon [in All programs] and Run as administrator

    Where
    MAC–> ~username/Library/Application Support/Adobe/Dreamweaver CS5.5/en_us/Configuration

    Great tips, Greg. Thank you!

    - Shannon

  8. muma Says:

    Thanks for the tip! :)

  9. Mark Says:

    Perfect, resolved my DW CS6/SCSS search woes!

  10. Paul Krey Says:

    Great Tip!
    For those of you with Windows 7(64)…

    C:\Users\[your user]\AppData\Roaming\Adobe\Dreamweaver CS5.5\en_US\Configuration\Extensions.txt

    C:\Users\[your user]\AppData\Roaming\Adobe\Dreamweaver CS5.5\en_US\Configuration\DocumentTypes\MMDocumentTypes.xml

    Good luck!

  11. Richard Says:

    Is there something different when it comes to Mac Mountain Lion, Dreamweaver CS6, and file locations. I can not get this to work.

    I only have the directories listed under the applications folder, and nothing here ~username/Library/Application Support/Adobe/Dreamweaver CS5.5/en_us/Configuration or any other folder that represents Dreamweaver, as this one specifically says CS5.5.

    I did modify the files that you mentioned to a “T”, even tried copy a pasting your file. Then I also set the file properties of the .scss file to open in Dreamweaver, but there is absolutely no color syntaxing. It does however open and in code view but no color to help out.

    Please Help, thank you.

  12. Christopher Dosin Says:

    @Paul Krey: Thank u ! That was my fault :) I changed the files in programes/adobe/dreamweaver and it didnt worked.

    now with your path it works fine :)

  13. Jeremy Says:

    This worked well on my Mac, but my Win7/64 machine does not have a DocumentTypes folder in its Configuration folder, and no XML file with that name either.

  14. Jeremy Says:

    For some reason, my DocumentTypes folder is in a configuration folder within Dreamweaver’s own folder (not my user folder).

  15. adam Says:

    I have a DW extension up on github that adds code coloring for SASS and LESS automatically. Also adds some compass code hinting for CSS3 functions. Please feel free to use or improve it: http://github.com/adamcoulombe/dw-compass-codehints

  16. Tim Says:

    Worked like a charm! But my Extensions.txt file was located in the Applications/Adobe Dreamweaver CS6/Configuration folder. This must be new with CS6.

  17. LESS CSS – Beginner’s Guide Says:

    [...] Using Dreamweaver for Sass and LESS [...]

  18. LESS CSS – Beginner’s Guide | Best Web Consulting company in Nashik, India with Creative and Professional Website Design, Content Management Systems, Wordpress Experts, Ecommerce SEO, and more.. Says:

    [...] Using Dreamweaver for Sass and LESS [...]

  19. Lou Says:

    Don’t edit config files – follow these simple steps

    http://helpx.adobe.com/dreamweaver/kb/change-add-recognized-file-extensions.html

  20. GREAT SASS setup information or (SCSS) | Desarae A. Veit : Sassy Stylish Geek Says:

    [...] http://blog.assortedgarbage.com/2012/03/using-dreamweaver-with-sass-and-less/ [...]

  21. LESS CSS - ??????????? ??? ?????????? | ???? ?????? ?????? Says:

    [...] Using Dreamweaver for Sass and LESS [...]

  22. saerts Says:

    Thank you so much for this post.
    The way I work in Dreamweaver CS6:

    I don’t refer in my html to the .scss files.
    In Dreamweaver Preferences (general) I uncheck ‘Enable related files’, restart DW.

    And then open the html file and the .scss files.
    So every time I edit the .scss files, CodeKit compiles the file and I can continue working in DW (without DW asking me to update the css file in the related files.

    Works like a charm

  23. Dipper Says:

    Worked for me on Win7/64. Much appreciated.

  24. Molefi Says:

    Thanks Adam, it really helped me a lot since I’m still new in Less and Sass.

  25. Carsten Says:

    Thanks for your tutorial! I made the changes, but DW CS6 doesn’t color the scss code. Any idea, why?

  26. Carsten Says:

    Ok, got it: In CS6 there is a users version of the xml file. This is the one to edit! MAC: Library > Application Support > Adobe > Dreamweaver CS6 > Configuration > Document Types

  27. Curtiss Says:

    I like that my SCSS workflow can work in DW now. One thing that doesn’t seem to work is nested selectors don’t appear in the proper color. Hopefully Adobe will come up with a fix to make it work natively.

  28. The Frosty Says:

    I had great luck with this Dreamweaver extension which handled all the updates: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522#

  29. Biotess Says:

    I found the answer for Mountain Lion users in the Adobe forum, by Kricir (http://forums.adobe.com/message/4715452):

    “I know on my end I stumbled across the solution and I do hope this works for you as well.

    If you are working in Mountain Lion with cs6 I can tell you I couldn’t find one of the sets of files because they were in a HIDDEN /library folder in my user directory.

    If this is the problem that you are having, make sure first to go to terminal and turn on hidden files (copy this into terminal):

    defaults write com.apple.finder AppleShowAllFiles -bool true

    Then hold “Alt/Option” and right click “Finder” then click “Relaunch” in the pop up menu.

    From there you will be able to find the /Users/”USERNAME”/Library/Application Support/Adobe/Dreamweaver CS6/en_US/Configuration/extensions.txt and /Users/”USERNAME”/Library/Application Support/Adobe/Dreamweaver CS6/en_US/Configuration/DocumentTypes/MMDocumentTypes.xml.

    Once you edit those files restart Dreamweaver and everything should work just as expected.”

    Hope it will help you as much as me! :)

  30. Dennis Says:

    I have set up CodeKit on my Mac today, but as soon its running Dreamweaver cant safe the less files any more. I get an access denied error. When quitting CodeKit DW is saving files without any problem. Seems that CodeKit blocks the files or OS X thinks it does.

    I also tried BBEdit and now OS X throws out an error message
    Espresso works fine though.

    Anyone has similar problems?

  31. Filip Says:

    I’ve got Dreamweaver CS6 on Windows 7.
    I did all changes to config files and even have restarted my machine. Still don’t see coloring. It was working for my CS5.5 version before.
    Any idea what is wrong?

  32. Filip Says:

    I found the solution. In CS6 in addition to the files listed in both tutorial (linked in the question), there is one more file that needs to be changed. It’s MMDocumentTypes.xml located in AppData files here:

    C:\Users{username}\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration\DocumentTypes

  33. RobD Says:

    Thanks for the helpful post. Can anyone point me at the config file that determines which file types Dreamweaver includes when searching though files? Thanks in advance.

  34. Subhrajit Says:

    I have added some extensions for dreamweaver and its working fine for me and I found it at http://webdesignsolutions.co.in/sass-extension-to-dreamweaver

    I hope this will work for all. Try it once.

  35. Hifzur rahman Says:

    what about the extension for windows

  36. Khoa Says:

    Thank you for the tip. Love it when I could edit as many things as I can with just one IDE (and being the best one)

  37. Dan Says:

    Hi, Thank you very much for this…I’m still new to .LESS and .SCSS, and being the Dreamweaver lover that I am this tip is priceless.

    Additional thanks to Biotess who’s Mountain Lion solution worked perfectly for me.

  38. Rowel Says:

    Thank you thank you thank you! I just got Codekit to compile LESS files, but I still want to use the autocomplete and css hinting of Dreamweaver . This gives me the best of both worlds.

Leave a Reply