loading...
Cover image for Does SCSS take more space or load slow?

Does SCSS take more space or load slow?

pvcodes profile image Pranjal Verma ・1 min read

Hi Guys,
Today I was surfing on youtube and at a sudden a SCSS crash course pops up. Then, obviously I check it out. It seem to be very good and definitely easy.

But after watching it. I thought if their will be more files of stylesheet it will take more time and more space. So I googled it, but don't find anything.

So, please the Good/Experienced DEVs. Give some knowledge..

Discussion

pic
Editor guide
Collapse
iamschulz profile image
I am Schulz

Sass is a preprocessor for css. It doesn't inherently change the size of the CSS that comes out in the end, but it does have functions that can lead to drastically different file sizes.
Loops are dangerous, because they create CSS rules iteratively. Loop a large selector and you're bound to bloat your bundle size.
Includes can be tricky too because they obfuscate what they do.

However working with extends can reduce your bundle size, because they promote less repeating code.

Collapse
pvcodes profile image
Pranjal Verma Author

So, Should i use it?

Collapse
iamschulz profile image
I am Schulz

I don't know. Would it help you? Then do it.

Thread Thread
pvcodes profile image
Pranjal Verma Author

Oks, I will try for some next projects.

Collapse
amitavroy7 profile image
Amitav Roy

You will have to run some compiling tool to convert your SCSS to CSS. Because, in the end you would have to load up a CSS file on your website. And at that point, I don't think the file size will matter. On the contrary overall, the file size of SCSS files should be less. Because, you may have multiple files based on how you split up your styling logic.

But, with SCSS you get a lot of logical operators, nesting, mixins and other powerful tools which will overall reduce the space required for SCSS files also compared to CSS written without SCSS.

Last, but not the least... in your build tool you would have code to minify the CSS as well, right? So, I don't think there is anything to worry about.

Collapse
pvcodes profile image
Pranjal Verma Author

Yeah bro, thanks...

Collapse
baso53 profile image
Sebastijan Grabar

Usually, if you compare an SCSS file and the CSS that was generated from it, the CSS would probably take up more space most of the time. That's because SCSS adds syntactical sugar for CSS which in turn compile into more lines to achieve that feature.

Does the file size difference matter? Probably not. Even if it's twice, or thrice the size, it's probably worth it. Plus, as someone already mentioned in the comments, if you use a minifer, it matters even less.

Collapse
pvcodes profile image
Pranjal Verma Author

Yep mate, Thanks for ur advice ;)

Collapse
tchaflich profile image
Thomas C. Haflich

SCSS is compiled into regular CSS, so it's really just a more convenient way to write CSS.