SASS/SCSS still worth learning?
With all the wonderful new things that have arrived and will arrive in CSS, I am wondering if SASS is still something worth recommending to beginners as a must have skill?
(I'm inclining to yes cos a) legacy projects, and b) its a good tool for building your own "framework", (also my reason for saying learn and use BEM and then adapt your own version)).
22 Replies
People keep saying modern css will replace sass... what features does modern css have? Nesting I know, but are there mixins and functions too?
Yes and Kevin's course will be coming out next few weeks https://www.beyondcss.dev/
Beyond CSS
Take control of your stylesheets with modern CSS and tools like Sass and PostCSS
I've said this before but I'll use scss and post CSS just for plugins and media query variables. 😅
As others have said, I never start a project without it just because why not? It has the added functionality if I need it, but elsewise oh well. Modern tools like vite make it so easy to use SCSS, you don't even think about it. Take 1 minute to set it up and it just works without thinking about it.
Mixins alone are absolutely worth it on their own, for me anyway.
You have two good reasons to learn it, yes! However, for new projects you should give careful consideration to using vanilla CSS as it just works and you don't need a compile step. One less point of failure in your build pipeline!
And for many projects vanilla CSS is perfect because you're not going to be making Apple's homepage for every project, right? A simple blog doesn't need all that extra work.
I think that is the direction of travel. we are just not there yet
I've gotta disagree with you here. I build mostly static websites and I've found that having mixins can be a big help.
#depends
y'all do you and what not. Tools are as useful as they are if they save you time and energy use them.
big small or not at all
Yup for sure!
I'm with @13eck on this one.
I have never used SCSS on any "real" projects nor do I see any advantage in doing so. To be fair I only started learning it a few months ago, more out of needing to have it on my CV than for any real interest, no doubt a few years ago it would have been more useful.
Whilst I'm on the subject, I do not get the attraction of nesting - I find it more confusing than helpful as when see it in the code you then have to scroll up the code to find out what it is nested in - I much prefer seeing what the selector is where it is defined, not 100 lines further up.
I also don't like nesting a whole lot either but it's definitely useful at times for smaller stuff (like ::before, ::after). I typically try to keep things nested 1 layer if they're small styles because I find it helps with readability
OK, yes, I'll give you that. I can see why for pseudo classes and elements nesting could be useful.
Nesting will also make the code shorter, so there's less scrolling. Mixins and functions also help to achieve that. And if you organize things neatly into files you shouldn't have giant files with tons of rules in them, but rather just many small ones labeled properly. Does CSS have the ability to include other files? I've missed a lot of new features from CSS so I'm not sure if this remains exclusive to preprocessors. Even if it did, having things like minification and autoprefixer are yet more reasons to use the toolkit.
And then one last thing while on the topic of nesting, is that it really helps limit specificity issues. I rarely ran into them anyway but with nesting, I've legitimately never had an issue with it. It always maximizes specificity, and I tend to use scoped styles anyway so I'm not nesting 50 levels deep or something ridiculous 😂
I found that nesting makes sense if you use BEM because then you aim to create a block and put everything relevant inside that block. At first it took me a while to get used to thinking BEM way, but now that I did, it seems so natural
In regards to nesting, it seems useful to me if you view nesting as a way to componentize a particular component on the page, if you use BEM like syntax like '& &__element' then the nesting results in less being written whilst grouping your declarations within a easy to find block. This is where SASS/SCSS is more powerful than CSS nesting AIUI (and my experience is not much in this regards).
The nesting and grouping also helps isolate the CSS code (in regards to specificity)
CSS has the
@layer property that alleviates grouping and specificity issues:
https://developer.mozilla.org/en-US/docs/Web/CSS/@layerI use nesting for just the opposite of BEM .... Parent class > nested element and attribute selectors... Why name things that already are named for you....
It's def nice for modifier classes to in the same sense you use BEM
I've been struggling with coming up with excuses to name things precisely because of this. It's very convenient to just take advantage of nesting in this way, and avoids cluttering the HTML with uselessly long class names.
hello !! does someone test css cascade layers with scss? can someone hel me with imports?for example i have _headers.scss in layout folder how can and mus i import this file into main.scss? i try something like this but it's not work @import "./layout/header" layer(layout);
This has nothing to do with the initial question. Please make a new question. Be sure to read #How To Ask Good Questions for a primer on how to ask as well as best practices for asking questions