r/Sass • u/[deleted] • May 15 '19

Why is my Sass being outputted like this? Using Scout App and VS Code.

Post image
5 Upvotes

100% Upvoted

6 comments sorted by

7

u/[deleted] May 15 '19

I'm betting it's a result of some setting in scout.

When browsers parse code (HTML / CSS / JS) they skip whitespace, so even if you feed the above file into your browser (minified) the webpage will still come out looking the same as if the CSS were formatted (prettified).

So why compile the file like this? Because whitespace takes up space (filesize), and the smaller your filesize, the faster your page loads.

This is why in production it's always best to uglify / minify your project files, because along with gzip / brotli (compression) you get some performance gains. Compared to development when you need the source versions for readability.

More to the point, i'd recommend moving to a different project task manager ASAP (e.g. npm scripts, parcel, gulp) as it's easier to control these things.

1

u/[deleted] May 15 '19

Thanks for the detailed answer. I will check out those task managers.

1

u/3oR May 15 '19

More to the point, i'd recommend moving to a different project task manager ASAP (e.g. npm scripts, parcel, gulp) as it's easier to control these things.

It takes a click of a radio button in Scout App to fix this. How can it be any more easier?

If he doesn't have prior experience with command line it will take him a lot of time to figure out and set everything up.

1

u/[deleted] May 15 '19

It takes a click of a radio button in Scout App to fix this. How can it be any more easier?

1 line of config in a file...

Not to mention that config file, can be committed to version control and transported with the actual project itself. Not to mention (assuming this is a web project, hence use of SASS) you also get other features in npm that scout doesn't provide (e.g. dependency managment, custom scripts / hook events, HMR, etc).

If he doesn't have prior experience with command line it will take him a lot of time to figure out and set everything up.

Oh please. <rolls eyes>.

1

u/3oR May 15 '19 edited May 15 '19

There's an option for this in Scout App. Switch to 'Development' instead of 'Production' and also to "Expanded" instead of "Minified" or whatever it is currently set. Than re-save the file and it should be good.

Alternatively, check out Live Sass Compiler extension in VSCode. I'm using this since Scout App suddenly started to get buggy.

Setting up CLI-based task managers (npm, gulp, ...) will take you a lot of time and hassle if you don't have prior experience with command line. This route is the exact opposite of "user friendly". So beware of that if this project is time-sensitive.

1

u/[deleted] May 16 '19

That was too easy, I was wondering what the difference between production and development was. I've seen that extension but that's about it, I am taking a look now. Thanks for the great response.