Working with SASS in Adobe Dreamweaver

Question

I am trying to figure out how to start using SASS files in Dreamweaver.

The error message I get when trying to open is: "Can't find a valid editor for this file extension".

All my SASS files are valid and open well with Eclipse.

Thanks in advance to anyone who could post any tips on this one.

Corcovado

sass-lang.com/editors.html does not list Dreamweaver as a supporting Sass editor. Does it mean that having one of the most popular and most expensive text editors on the market I won't be able to code in this great and fairly popular meta-language? – Corcovado

This is an old question, but in case anyone gets here from Google: Dreamweaver 2017 now includes full scss support including a built in processor. – Saundra

Answer 1

OK. I have found the answer.

All you need to do is open Dreamweaver, go to Edit> Preferences> File Types / Editors and in the top text box ("Open in code view:") listing various files extensions add .sass.

That's it. Rest is down to haml and compass.

I hope this post will help anyone having similar problem.

Corcovado

Back in a day I was still using the old sass syntax - but the same would apply to .scss – Corcovado

Answer 2

To go even further and make Dreamweaver treat .scss files as .css files (applying code coloring and indentation), just follow the instructions on this Adobe TechNote

Jehovah

Many thanks for this link, Alonso. I did try it yesterday in CS5. I found the Extensions.txt and edited it but in this new version of Dreamweaver the folder structure must be slightly different as I couldn't locate the MMDocumentTypes.xml file. So highlighting sass as css is not working for me yet, but I'll give it another go and also test it on other machine with CS3 and post the results here, as soon as I get there. – Corcovado

Answer 3

The visual28 link no longer works. Here is a quick rundown from here

DreamweaverCS?/Configuration/DocumentTypes/MMDocumentTypes.xml  

If Windows change winfileextension="css" to winfileextension="css,scss"

If Mac change macfileextension="css" to macfileextension="css,scss"

Shirl

Answer 4

For older Dreamweaver:

http://www.visual28.com/articles/less-scss-syntax-highlighting-in-dreamweaver

For Dreamweaver 5.5 and above:

http://forums.adobe.com/thread/861133

Maighdiln

Answer 5

instead to go in your installation directory to find the 'MMDocumentTypes.xml' file, GO to

C:\Users\\AppData\Roaming\Adobe\Dreamweaver CS5?\en_US\Configuration\DocumentTypes\MMDocumentTypes.xml

and then find winfileextension="css" and change it to winfileextension="css,scss"...

That would definitely work..

Delogu

That was definitely what was missing for me - the changes to MMDocumentTypes.xml file in Program Files wasn't doing anything. Changing the file in AppData did. – Tetanic

Answer 6

1. Update to the latest version of Dreamweaver

2. Ensure that ‘Show hidden files’ is enabled in Control Panel > Folder options

3. Open your user folder eg C:\users\Dylan\ replacing with your name

4. Then open AppData/Roaming/Adobe/Dreamweaver CS6/en_US/Configuration/

5. Open the file Extensions.txt

6. Replace the first line with the following:

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,LESS,SCSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents

7. Replace the following line:

CSS:Style Sheets

With

CSS,LESS,SCSS:Style Sheets

8. Save and exit the file

9. Go to the folder DocumentTypes

10. Open the file named MMDocumentTypes.xml

11. Replace the line beginning with:

=>documenttype id="CSS"

with

 <documenttype id="CSS" internaltype="Text"
 winfileextension="css,less,sass,scss" macfileextension="css"
 file="Default.css" writebyteordermark="false" mimetype="text/css" >

12. Save and exit the file, and restart Dreamweaver

13. Syntax highlighting now works

Dani