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)
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.
So, Should i use it?
I don't know. Would it help you? Then do it.
Oks, I will try for some next projects.
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.
Yep mate, Thanks for ur advice ;)
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.
Yeah bro, thanks...
SCSS is compiled into regular CSS, so it's really just a more convenient way to write CSS.