The differences between CSS and Sass Nesting

CSS Nesting is here, but it’s a little bit different from Sass nesting. In my previous video, I quickly mentioned a couple of differences, but I didn’t do a full on comparison. In this video, I look at how the two of them are the same, how they are different, and how Sass is going to deal with native CSS nesting in the short and long term.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:38 - You need to use & with element selectors
01:40 - You can’t create a new selector using &
04:22 - Specificity can be different
05:38 - Selectors might be different
8:30 - How is this going to impact Sass nesting?

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[firedforfighting]

i went from feeling confident in my understanding of css to feeling floored and confused with how much has changed..thanks for this video to help!

[iamtharunraj]

I have been using SCSS because of the extras that it provides over vanilla CSS. It's great that CSS finally has one of the most asked features!

[shanedonlon]

I think we may need a CSS visualiser/ debugger that rewrites nesting into "standard CSS" for troubleshooting. Especially for newer people to CSS, as I can imagine nesting in CSS will be very very very popular, and I'm sure on bigger CSS files it could become very complicated. But this is yet another very exciting moment in the growth of CSS, and I'm all for it.

[chainedbeauty]

Love learning from you Kevin! I'm super excited for the new course you are talking about! thanks for being awesome! 🤩

[shonuff]

I just discovered your channel. I have been a front-end developer for 20 years and I have already leaned some things from you.

[leelokje]

Hi Kevin. I love CSS as much as you do and I love all your videos! I have a request for a video and I’m not sure if you have made one like this already. I wish you could make a video on how you set up VSCode with the browser on the right side, as shown in your last video, plus giving us a list of extensions, if any, related to CSS and SASS and anything else in order for us to make coding in VSCode more user-friendly. Thank you so much in advance! I would also love to see more CSS battles between you and Kyle and I am sure that I am not the only one who’d love to see more of that. It’s better than watching sports (to me)! ❤❤❤

[TheRavageFang]

Would be great that dev tools could show how the nested css gets interpreted.

[danielluna]

CSS has come so far, but just because it has nesting doesn't mean it's a replacement for Sass. I love Sass. Loops, maps, concatenation, mixins, functions, $ variables...I couldn't imagine doing a large-scale project without Sass.

[shterevyordan]

Thank you @KevinPowell for sharing this. Do you have any observation about of reading and executing nested CSS? On prod SASS is compiled but what about native CSS?

[gangasaikumarg]

hi sir, can you make video on creating a vscode like scroll bar,
in vscode right side have a zoom scrollbar., can you re-create that with css (vscode editor have the right-side scrollbar)

[VeitLehmann]

I think one great thing about native CSS nesting is that it'll prevent bloated compiled selectors that would be the result of doing something like this in Sass: `.a, .b, .c { .x, .y. z { ... } }`, resulting in `.a .x, .b .x, .c .x, .a .y, .b .y, .c .y, .a .z, .b .z, .c .z { ... }` (imagine that with longer/more/deeper nested selectors). But on the other hand, it's likely to cause new specificity headaches, at least for less experienced devs.

[BarunKharel]

I have come to not like nesting in SASS.
It makes code less readable as developer has to scroll to understand the selector as a whole.
And now, CSS nesting makes it even worse as developer has hover on the "&" symbol in the Developer Tools to get the full picture of selector.
I wish it was never added to the CSS spec.

[VideoNOLA]

Does nested native CSS have the potential to help minimize my code? Because my particular project has as one of its specs, "Output should be less than 1024 chars."

[ariosetiawan]

sometime i face case, which is need to select element between parent class & child, i think selected ":is" will be useful for that case 🤔

[MrDoodleDandy]

What mini-app or work-hack are you using to paste in the code? Just cut & paste, or do you actually use your clipboard history somehow, and invoke that with a hotkey?

[svenyboyyt]

Can you not put a * in front? Like *div isn't any different to div but it starts with a symbol.

[proteus]

So does saas get compiled by the browser ?

[matrixplace]

SCSS is easier and more intuitive than vanilla CSS nesting. Also SCSS has so much more features, I cant replace it with CSS only. CSS try to implement the SCSS features but in more inconvenient way. For example I find CSS variables alful to define and use.

[awhite]

Firefox 117, that’s supports nested css is not released to the wider public yet. The current version is 115 which does not support it. What happens when a non-compatible browser tries to load nested css? Do you just get a broken layout?

[vinik]

8:23 In this particular edge case you could solve with `.call-to-action > .heading`
but it’s good to know how it works under the hood
thanks for the video