The differences between CSS and Sass Nesting

[@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!

[@cerealrakist7360]

Same

[@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!

[@Rust_Rust_Rust]

Unfortunately still missing mixins which makes the amount of css you have to write much less

[@iamtharunraj]

@@Rust_Rust_Rust Yeah. SCSS just provides that extra flexibility to the code with functions,mixins,maps and all that stuff. I use SCSS all the time with my projects.

[@Wolfeur]

I'd be really curious about why you'd be using SCSS if not for the extra features

[@Tarabass]

​@@Wolfeurto @apply my tailwind classes 😂

[@iamtharunraj]

@@Wolfeur I don't really know the reason either. I came across a random tutorial on SCSS. I started playing with it and I must say I felt like I have been wasting my time with CSS until I know about SCSS

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

[@aaronlink127]

Maybe editors like Visual Studio Code could be updated show the full selector when you hover over a nested selector (maybe an extension?). Would've been nice for SCSS too, but that has the option of looking at the final outputted CSS.

[@chainedbeauty]

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

[@shonuff4323]

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)! ❤❤❤

[@danielluna7648]

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.

[@TheRavageFang]

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

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

[@KevinPowell]

I agree that SCSS nesting is easier, and there are so many great Sass features not in CSS, but I completely disagree about variables 😅. CSS custom properties are so much more useful, from changing them on media queries to redefining them with JS and a few more things. I use SCSS for my projects, but custom properties for a lot of things (I actually use a SASS map that gets turned into custom properties)

[@theodorealenas3171]

Yes, also worth mentioning, the browser tools can show you where CSS variables are defined. I expect that CSS nesting will have similar benefits.

[@nelson6e65]

Sure, nesting it's a thing, but easy than CSS variables? The advantages of CSS variables are a game change, because you can combine them to add much more real-time interactivity to the user. Also, they improve a lot the legibility of your code. I actually use SCSS variables to build CSS variables. 😂

[@matrixplace]

Ok, maybe I should dive deeper into CSS variables… What I meant is that I dont like the syntax of defining them and that you have to use the var function to use them.

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

[@LokiDaFerret]

It's really simple to explain this and I don't know why you just don't say it.... In SASS it is a placeholder. In CSS it is an object reference. Done!

[@doug7897]

Thanks, I hate it. Having native nesting just be a convoluted alias of :is() seems incredibly stupid given how much of expected behavior gets butchered by it.

[@KevinPowell]

afaik, it's the only way they could have made it work. Browsers don't compile code, so they need the & to be a live object. having it use :is() was the solution to making it possible at all from what I've understood following the discussions on it.

[@Wolfeur]

I'm not sure what exactly you were expecting. Nesting is fundamentally just syntactic sugar to structure your relational selectors.

[@theodorealenas3171]

Doesn't it make sense though? Ampersand means "as well as"

[@romankonecny7106]

Thx for an amazing vid Kev!

[@shterevyordan3337]

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?

[@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

[@Laura69]

That behavior of :is() is not really obvious. I think it should be documented somewhere but I've never read anything about that. This the first time I saw it and im really impressed. It's kind of like :has() is some way.

[@Rai-Lopez]

Without the ability of concatenating selectors, I think the real benefits and usage of the new feature will keep as something almost anecdotal after all... It's a pity they didn't go all out since they were at implementing one of the most desired/missed CSS features of all times 😔

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

[@LeeSmith-cf1vo]

So I've just realised that you can (ab)use the way the :is selector works to get around specificity issues by throwing a random ID selector into it (that doesn't match anything) i.e. `:is(#specificityhack, .something) . somethingelse` has a higher specificity than `.something .somethingelse`. Im not saying you _should_ do this, but you could.

[@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?

[@KevinPowell]

I have it off screen when I'm doing that, so I have to go copy it 😁 I do use my clipboard history a lot though, just not in videos. On windows is windows key + V, super handy!

[@EvanEdwards]

It has 73% support, and 77% support on mobile for global users. That's better than I would have guessed.

[@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."

[@sebastianszydlowski5834]

What do you think about bulma css?

[@antifa_communist]

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

[@KevinPowell]

*div isn't a valid selector though. * is a stand alone selector, which means all elements. You'd have to do *:is(div)... I'd rather do & div 😅.

[@gE0013]

Lately I'm using TailwindCSS heavily, son I'm kind of slowly moving away from SCSS. BUT, man, this $$$$$UCKS! It's awful! So confusing and it will bring a LOT of bugs! Thank you a lot for this video, basically you are turning into a condensed w3schools :P

[@brhh]

Neat, I'll never use it tho

[@deatho0ne587]

I am glad BEM does not work in native CSS due to I dislike typing the character _. Wish native CSS put the part in a :has() or :where() instead of an :is().

[@gangasai_kumar_G]

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)

[@a1white]

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?

[@hebedite4865]

usually either there will be a fallback, or the page will just tell you it doesn't support your browser

[@shadowcraftplayer9075]

Hope css follows the javascript patern of absorb the usefull stuff of popular libraries like jquery. Also they need to fix some stuff. Css still to complex and requires a way to deep understanding to do some simple designs.

[@ariosetiawan173]

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

[@VeitLehmann]

:has can be useful for this case. But in most cases, it'll probably be better to re-arrange the CSS so it's not needed at all. Makes life easier for other developers or your future self.

[@TheBoysMemes123]

awesome

[@proteus1]

So does saas get compiled by the browser ?

[@Dadaadad268]

No

[@Tarabass]

Compiler versus interpreter

[@icoderdev]

❤

[@nelson6e65]

I think that if Sass will add compatibility to native nesting, it should be a flag (like JavaScript target option in TypeScript), so I never turn on. 😂

[@banzai1873]

Hmmm...

[@back2Islamyt]

Css donsn't need "&" now

[@nomadshiba]

never used sass but have been using nesting with css. and chrome doesn't require you to use &

[@KevinPowell]

I just tested it here, and I definitely need the & if it's an element selector: codepen.io/kevinpowell/pen/jOQKZrO Are you using PostCSS or something else to process things?

[@AbhinavKulshreshtha]

Is CSS working group deliberately making rules so confusing, just for the sake of differentiating themselves from preprocessors?

[@fobosj]

Hi Kevin, do you use any utility for placing windows? I see it here kzbin.info/www/bejne/opunepZ4pZJsqbM . Could you share what kind of utility it is?

[@talkdatrue]

Honestly native nesting is kinda useless. There’s nothing new that we couldn’t do previously.

[@jeanlasalle2351]

It actually seems to make things worse especially since that might break sass

[@rand0mtv660]

@@jeanlasalle2351 Why would it break SASS? SASS compiles into valid CSS that isn't nested in any way. Not sure how CSS nesting can break SASS

[@KevinPowell]

It won't break Sass, since Sass will continue to compile everything anyway. If you use Sass, you're using Sass nesting, if you don't use Sass, then you're using native neseting :)

[@rand0mtv660]

@@jeanlasalle2351 Oh sorry, you mean using native CSS nesting syntax inside SASS might break SASS?

[@jeanlasalle2351]

@@rand0mtv660 Sorry, I wasn't very clear. Sass will still keep the same syntax so nothing would really break but if for some reason you have to work with both it might cause some headaches : I can already start to imagine the nightmare it would be to be contracted to port native css to scss in the future or having to work with a design system including both for compatibility. Also I don't know how sass will try to adopt the native css nesting syntax but I hope it would not imply performance tradeoffs or guessing what you want.

[@YunisRajab]

98% is so high it'll take forever

[@a1white]

Sorry, I got lost and totally confused on this. feels like you're trying to explain a bit too much at once or maybe I'm just having a slow day. I looked up about it and read up . I understand it, i think, now.

[@Flyers8810]

Seems confusing and annoying. I'll just continue to use sass or write out selectors long form. Not that big of a deal.

[@HarryPujols]

Concatenating selectors is by far the practice I hate the most in Sass, good riddance. I can make an entire video explaining why it is such a horrible practice. The one thing that wasn’t mentioned here and I am most interested in, is nesting MEDIA QUERIES; that alone makes Sass still relevant.

[@daveware329]

Hi Kevin, I need a PC

[@nelson6e65]

🤡 Maybe if you never used Sass before or the tool it is erased for some reason, but I don't see any advantages of native CSS nesting 😐: it is verbose, not easy to debug, it's a breaking change and just make more complicated for pre/post processors to add compatibility. 😮‍💨 I don't see the point. Sass it is already doing the job.🤗

[@nelson6e65]

Instead of learning native CSS nesting, just use SCSS. Currently, most of compilation tools are almost instantaneous and you can see the results in the browser in real time with HMR.

[@WebDeveloper682]

why you are not making javascript videos

[@KevinPowell]

I'm better at CSS 😅

[@castlemoyle]

@@KevinPowell Then why aren't you doing cooking videos? (grin) (Not beer making, but cooking)

[@feldinho]

If you use BEM-style naming, please, pretty please, with a cherry on top, don't use &__ and alike on your SCSS. The few letters you're saving on typing, you're going to pay tenfold on maintainability (or worse: someone else will).

[@teugene]

Nope. Nothing wrong with using &__ and &-- since the element and modifier are under the scope of the block. This is pretty much standard practice. But don't do &- for another block class. Since it's a block element on its own, it should be fully named and not nested under another block name. Much more maintainable and readable that way too.

[@KevinPowell]

I've never understood the issue with this. If you're in a dev environment you should have maps enabled, and you know exactly where the styles are, from the partial they are in and the line number of the code within that file 🤷

[@feldinho]

@@KevinPowell while today it's easier to debug a specific element, it becomes impractical to just search for all occurrences of a selector in the code (whether from vscode or using a cli tool like ag). Ideally, there shouldn't be many instances of a selector, but not every project is as simple as demoland, and working with large teams and freelancers, I had to deal with this a lot in 20+ years. It's just not worth it!

[@gangasai_kumar_G]

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)

[@gangasai_kumar_G]

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)

[@gangasai_kumar_G]

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)