Inspiring

Question

Format/beautify SCSS

Forum|Forum|3 years ago
March 23, 2022
3 replies
1780 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 ?

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.

Nancy OShea

Community Expert

Code before pre-prossing actually matters a lot and pre-processing as well can actually be a bad thing.
I have done a number of refactoring jobs and in terms of the CSS....

- Bad code, incorect code leading to pre-processing creating too many instances and uneeded CSS which in turn people try to overide and compile the issue. Lots (too many) example of cases of all this with just a tiny example of the thosands of !important that can exist in the render code as a result.

- Compiled CSS but still insanly large amount of CSS.

- Pure modern CSS with CMS/Server minify actually better and many solutions using less CSS pre compilers in general. I did one project and the main CSS file was 40k lines of code unminified. I re-did the root CSS and before a proper server side minification the main site CSS was 2k lines of code. The original CSS file before compile was over 20k lines.

- People using them to do short hand CSS to form their CSS as a reason. Considering 1 plugin in an app like Visual Studio code like Emmet doing pure effecient CSS and your doing it fast anyway.

Code before pre-prossing actually matters a lot

=========

@Liam Dilley,

I think we're in two different universes.

Beautified code is not important. How code is structured is very important. Bad code in, garbage out.

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.

Scanning file for viruses.

This file cannot be downloaded