DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Does SCSS take more space or load slow?
Pranjal Verma
Pranjal Verma

Posted on

Does SCSS take more space or load slow?

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..

Top comments (9)

Collapse
 
iamschulz profile image
Daniel 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
Daniel 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.

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.