Inspiring

Question

Format/beautify SCSS

Forum|Forum|3 years ago
March 23, 2022
3 replies
1768 views

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 has been closed for replies.

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

Nancy OShea

Community Expert

Yes. Lena gave you the correct answer.

Compression occurs when SCSS is processed to CSS.

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.

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.

L

L e n a

Community Expert

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

L

L e n a

Community Expert

NPM and DW are two distinct approaches, and do not interact with each other. The parameter I mentioned in my previous comment is taken into account when DW handle the compilation, not by using NPM.

So as you are using the terminal and NPM, try adding the following parameter to your instruction:

--style expanded

J

julianc31943986Author

Inspiring

My final css is carefully structured, minified etc etc. The final css is not a problem. I was just wondering if it is possible, in dreamweaver, to tidy up roughly formatted scss so that it is easier to read when I return to it, or if I need to share it with another designer/developer. Basically, I just mean indenting it correctly so it is neat. I find that if it is neat it is easier to keep it well structured and to spot errors or improvements that could be made. It's not a massive deal if Dreanweaver can't do that as there are other ways - I just wanted to know if I had missed something in DW that could save me a bit of time.

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.

Scanning file for viruses.

This file cannot be downloaded