Inspiring

Question

Format/beautify SCSS

12 replies
1831 views
Translate

Is there a way in deamweaver to format scss - just to tidy my messy files up and make them more readable? At the moment I am having to resoirt to copying my scss out of Dreamweaver and into Codepen to format it.

This topic is closed to new replies. Start a new post to keep the conversation going.

P

Paul23704417m5ue

Participant

Dreamweaver uses Brackets as its editor, so in the first instance I would look at brackets extensions, it uses Beautify to do the formatting, as far as I was aware beautify can format scss, maybe it requires a plugin? You can put a file in your project named .jsbeautifyrc and add custom rules for beautify. The fact 'code formatting' is greyed out may not be a good sign ....

Om windows this is the path to the beautify plugin : C:\Program Files\Adobe\Adobe Dreamweaver Next\www\extensions\default\BracketsDWBeautify

Translate

Nancy OShea

Community Expert

Yes. Lena gave you the correct answer.

Compression occurs when SCSS is processed to CSS.

Translate

Nancy O'Shea— Product User & Community Expert

Jon Fritz

Community Expert

It sounds to me like the OP is specifically looking for a way to clean up their SCSS file, not the output CSS.

DW doesn't have an Apply Source Formatting for SCSS and I've never heard of an extension that will do the trick here.

Translate

L

L e n a

Community Expert

Yes @Jon Fritz, you are certainly right, now re-reading the original question, it does seem that the OP wants effectively to format his SCSS. I missed it at first read. Sorry for the noise.

Can some moderator around here to unmark the correct answer which is not.

I don't think Brackets has such an extension. There would be formate at VSCode, but I don't think they have ported it to Brackets.

Translate

L

L e n a

Community Expert

Have you try to modify the output file style accessible from the site configuration, preprocessor CSS category ?

Translate

J

julianc31943986Author

Inspiring

Hi, thanks for the reply.

I am using npm in terminal to compile SCSS into CSS, so I did not have that site configuration option set up. So, I tried your suggestion but it did not alter the SCSS file (maybe I did it wrong somehow). Anyway, to be clear, what I am looking for is a way to tidy up and "beautify" my scss files, so that they are easier for other people to read - in the same way that you can do "Edit > Code > Apply source formatting" for HTML files. At the moment I copy my SCSS into Codepen, then click "Format CSS". Codepen tidies the code up, then I copy it back into Dreamweaver. There are also tools like https://codebeautify.org/scss-beautifier. That is the kind of thing I was hoping to find inside Dreamweaver, to help me become more efficient.

Translate

Nancy OShea

Community Expert

Pre-processed SASS and SCSS is just temporary code, I'm not worried about what it looks like. I'm using it as a means to an end, not for the world to see.

I suppose if I cared, I'd use Visual Studio Code with this SCSS Formatter Extension. Or one the various online formatters.

https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter

Translate

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.