CSS is getting better, but Sass is still relevant

🎓 Learn Sass, how we can use it with other tools like PostCSS, and how we can use it for things like theming, design systems, and general project architecture in my course BeyondCSS beyondcss.dev? (use coupon code earlybird for 20% off, valid until the 4th at midnight EDT)
🔗 Links
✅ Nesting and Mixin example: codepen.io/kevinpowell/pen/ab...
✅ Loop example: codepen.io/kevinpowell/pen/eY...
✅ If/else example: codepen.io/kevinpowell/detail...
✅ CSS-only particle animations: • CSS-only particle anim...
⌚ Timestamps
00:00 - Introduction
00:36 - Why I prefer Sass nesting over CSS nesting
03:23 - Mixins
06:23 - Loops
13:10 - If/Else
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@Raphael-jo1rp]

Use sass on a daily basis. The day css will implement mixins and fonctions beside nesting, we'll consider going back to css. Beside scss Tailwind is pretty solid. Love it too.

[@hongquannguyen5532]

true, since i learnt about sass, tailwind and typescript, i use them on every practicing projects

[@iamtharunraj]

Sass/SCSS is my favourite CSS preprocessor. I use it with parcel for both practicing and building websites. I really love the flexibility it provides over vanilla CSS.

[@WadieGamer]

I use Parcel Bundler, it's pretty awesome

[@arkson888]

Always brilliant. Concise explanation about Sass usage 👌

[@LePhenixGD]

12:46 Fancy way to add hue rotation! I'll definitely steal that one

[@topindamien]

That loop thing is cool! I chose SASS (not SCSS) for: nesting, clean looking, variables and the fact that I can cut my files into small digestible pieces. I feel mixins complexify the maintainabiliy. Other than that, I've learned a lot of stuff since I discovered your channel recently. Keep it up Kevin!

[@JasonJA88]

Super Awesome Style Sheet👍

[@Knards]

I love SASS. True, I am used to it, but I still delight in using it

[@VivekYadav-up7uu]

please keep making videos on the latest css properties

[@syn8485]

The BEM-style nesting is usually something I avoid as it means that seeing a class in the browser doesn't mean I can search for it in the code, that's a big drawback for me, especially as a codebase gets larger!

[@EricFressange]

You can map your compile file to find the good place of the nested element. Every browser has the option.

[@jarnalyrkar]

Sourcemaps helps the dev tools in your browser point out the exact line the rule is written on, and which scss-partial.

[@AlexMercadoGo]

Maybe we need a video on sourcemaps

[@syn8485]

I know source maps are a thing, but it's not really something I can use in my terminal/editor to edit said code.

[@StarOnCheek]

You can probably improve your workflow a lot if this is something you ever need to do

[@Atractiondj]

For me, if in CSS will be added mixin like in Sass this will be better. For example, we use display: flex; flex-direction …. Many times, with 1 mixin we can make code smaller.

[@drakZes]

You know you can just make a css class that does display: flex; flex-direction and use it everywhere needed. No needed for that?

[@Atractiondj]

@@drakZes i know and i use separate CSS clasa for this, but with mixin is easyer in another custumization. You can use a padding, background, border-radious for cards. This property You can use for another element and with shadow, not be easyer to add mixin to element?

[@kelindrawn]

For the If/Else example you could also just use em for line-height, no? Thanks for the video!

[@AgentZeroNine1]

Shadow DOM + Custom Properties + CSS Module Scripts + other new CSS features alongside whats been around for a while = perfection

[@blokche_dev]

Still relevant for the organisation of your styles across multiple files/folders too.

[@Cahnisama]

does the earlybird cupom combo with the purchase parity cupom?

[@donmorris4506]

Scss is my default too. I typically use scss version of bootstrap because it has so much built in for me. The responsive breakpoint system in bootstrap is one of my favorite features.

[@donmorris4506]

I think a lot of people that used bootstrap say, 5 years ago, don’t realize how much it has improved and been modernized, so they diss it.

[@donmorris4506]

I would encourage you to become skilled at css no matter which framework you choose, or don’t choose. It’s one of the reasons I follow Kevin, even though I use bootstrap a lot. Bootstrap can help you build a nice site but you really need to know css too. Scss has it’s own learning curve but the payoff is worth it.

[@daleryanaldover6545]

I get why Sass/Scss is loved by many but learning a new syntax back then was a deal breaker for my newbie brain (10 years ago). I decided to write in plain css, All you need to understand to write maintainable css is to keep in mind that styles cascade and with a bit of knowledge with how specifity works. I managed to never reach for Sass/Scss. With tailwind's release, I understand from the get go what they are trying to accomplish, it's what I've been doing for the last decade (prototyping styled components, FAST). Now I never need to manage the css file since I can do everything on the mark-up instead. And if you've been using css frameworks for the past decade as well, you know how hard fighting opinionated css frameworks are. You can keep a general config for the usual styles you need but not every project will be using the same everytime so we end up overwriting the god damn bootstrap and the like for every new prooject.

[@gangasaikumarg7393]

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

[@BigBlueRabbit]

That UPPERCASE mixin just looked like the creation of a maintenance nightmare.

[@EvanEdwards]

Is there a focused (i.e., doesn't do lots of other stuff) transpiler for modern CSS spec to an older spec? Sort of like what Babel does for JS?

[@jarnalyrkar]

autoprefixer is the closest I can think of. But something like transpiling grid-layout to floats would probably be quite complicated to accomplish. Never say never, though :)

[@EvanEdwards]

@@jarnalyrkar PostCSS was what I was thinking of when I said "doesn't do lots of other stuff," but I figured it was worth a shot. There's a neat polyfill project that I've seen that was tracking future CSS features that were on the cusp of approval (enough to be reasonably stable in syntax). I am not a huge fan of CSS polyfills in general, however. It may be a best solution if you want to try to keep generally to standards.

[@omegapirat8623]

what is your take on css in javascript like styled components in frameworks like react? To me it sounds quite appealing but I also hear tons of critics

[@beinyourguard]

for me, SASS is still way easier and more organized to use. it's my favorite preprocessor and I love to use it.

[@evasokolovsky166]

Thanks!

[@KevinPowell]

Thank you so much 🙏

[@muhammadilhamrobani7042]

My favorite channel for learning css

[@programmingjobesch7291]

Building a CSS framework/library atm and would be at a complete loss without SCSS. It'd be nearly impossible just based on how much longer it'd take.

[@oliver139]

How about PostCSS vs Sass? Recently I think that Sass is still my favorite against PostCSS..

[@gangasaikumarg7393]

Hi sir, can you make a video for visual studio like scroll bar wider preview. Visual studio have a right side wider scroll bar with active code line preview position, can you make that it is possible in css with js Can you please give me a solution for that , it's my humble request, Thank you sir.

[@4115steve]

whats the difference between sass and tailwind

[@drakZes]

Is CSS nesting actually available now?

[@OsvaldoNetoTomaz-et5yt]

today it is, after 7 months that you ask for it lol

[@ashawesomeone]

does it have all browsers support

[@chrisp129341]

It compiles down to vanilla CSS, so yes. (Note that you do need to have a SASS preprocessor to handle the conversion.)

[@ciroseijas8529]

Question should I master css vanilla to try learn scss?

[@Cyrus_G]

you don't need to master css to learn sass/scss, you just need enough knowledge in css like knowing its syntax and how variables work in css (variable works differently with scss afterall). You are gonna have a lot of trouble with setting it up first though so I suggest learning a bit about how npm works (installing nodejs, installing scss with npm, and how to set-up and use scss with terminal) It doesn't have to be npm though since there are other options. Lastly. Learning javascript makes it easier to understand if you want ever want to dip into features of scss like mixins.

[@stevecrabtree9141]

Fun video

[@ivan8661]

Sorry but the language you are showing is actualy scss not sass, which has a different syntax? Other than that nice video

[@jarnalyrkar]

scss = sassy css. It's just easier to say sass than scss. You are tecnically correct, though; sass doesn't use semicolons or curly braces, but line breaks and indentation instead.

[@ivan8661]

@@jarnalyrkar thats what i thought, thx for clarification tho 👍🏻

[@BigBlueRabbit]

Must admit I wasn’t convinced - SASS at this point just looks like unnecessary overhead. Just my opinion 😊

[@toddfisher8248]

I just can't handle debugging sass - it's so annoying because line numbers from web inspector never line up.

[@jarnalyrkar]

The solution to this problem is source maps :)

[@BigBlueRabbit]

@@jarnalyrkaror just use pure CSS and drop the overhead

[@jarnalyrkar]

@@BigBlueRabbit Sure, but how about organizing the stylesheets? They should be minified to one file anyway, so some overhead is probably unavoidable

[@BigBlueRabbit]

@@jarnalyrkar Not necessarily if you have full, manual control - “it depends” of course. There are much more lightweight solutions if you really need that though.

[@jarnalyrkar]

I do have full manual control, but I dont really feel like going back to one single css-file with all styles in it. It just gets so messy so fast. I do like the idea of keeping things as vanilla as possible, though!

[@kaicooper9421]

I won't stop using sass until css is as good or better than scss

[@codewithdave]

Native css still has a lot to do to stop me using SCSS.

[@TheMetalMag]

Sass is ok for big projects but at the end is a big mess

[@daleryanaldover6545]

I maintained a legacy code written using bootstrap and sass before, it was a nightmare.

[@kal.leroux]

yeah but tailwind make it easy to maintain code

[@seeker3794]

Yes it really makes code a lot more messier....

[@User-404]

ill consider sass whed ill doo very good with css

[@anmolsharma4049]

I used native css nesting in production app, got complaints for users, had to recompile using sass and replace it bad experience

[@rossclutterbuck1060]

eh? Why would users give two shits about how you wrote you styles? Unless their browsers don't support native CSS nesting, which then becomes a you problem.

[@anmolsharma4049]

@@rossclutterbuck1060 yes, support is not great, i basically used it for designing cards, turned out to be a mistake

[@DuK-2102]

Sass is awesome

[@gosnooky]

I don't do front-end anymore myself, but we still require SASS for the front-end, and will for the foreseeable future. Native CSS may be progressing nicely, but that's the operative word - "native". Although most people are browsing with modern browsers that update with new features frequently, and new JS and CSS features are implemented all the time, we still consider these progressive features as if there were still a significant percentage of users using browsers who don't support it. Perhaps it's a vestige of being around long enough to remember the days before rapid release, but we always ensure that our front-ends are compatible with browsers up to 5 years old. Maybe it seems silly these days, but we don't adopt new native features until at least a couple years after release. Are we just that old?

[@GiorgiKavtaradze-cy1ye]

🔥❤👍👏

[@HarryPujols]

Concatenating classes is bad practice, that's not a feature of Sass, it's a problem.

[@jarnalyrkar]

How so?

[@daleryanaldover6545]

​@@jarnalyrkarIt introduces complexity that couldn't have dealt with if plain css is used. When writing plain css all you need to think is cascading styles and specificity, sass adds another layer called nesting which is nice if learned properly. But oftentimes people reach out for sass because everyone in the neighborhood uses it and never bothered learning proper css.

[@jarnalyrkar]

@@daleryanaldover6545 I thought that was Bootstrap 😁

[@GabrielSouza-sz5ju]

Mixin look like small components.

[@PicSta]

For me, SASS is still like CSS on steroids. Of course, over time we got new things to CSS, or when custom properties (CSS variables) came out, it changed a lot. Before that, we never had the chance of using any kind of variable in CSS. SASS still offers much more, not only the better nesting, it's the whole thing which makes CSS more like a programming language. For minimal projects, Sass is maybe too much, but this depends on so many subjective things.

[@alexpanteli3651]

Use tailwind

[@ambroseliew]

Naww, with nesting being supported in CSS, there is almost no practical usecase for SASS. Tailwind > CSS > SASS

[@daleryanaldover6545]

Tailwind == CSS But I agree since I never reach for sass, and been writing plain css for a long time until tailwind came out.

[@notarealperson9709]

and tailwind is better than all

[@rossclutterbuck1060]

I'm sorry, but Sass was never relevant. It's a band-aid put over issues that don't exist if you're even vaguely competent with CSS, and one of many elitist propaganda tools deployed to make web development seem more complicated than it actually is to force emerging markets out of the picture and stop them undercutting overpriced design houses. Sass et al were only ever useful for vendor prefixing, and now that's largely a thing of the past Sass has zero relevance.

[@turolretar]

Maybe you’re right. It was all just a big misunderstanding

[@maerosss]

What about all the examples he mentioned? Anyway, even without those, it still makes for a more readable and quickly-written css. Also, sayng it's just an irrelevant band-aid is like saying vaccination is a band-aid for our failing immune system. No matter what's the reason for using it, it is damn useful and a good thing.

[@daleryanaldover6545]

​@@maerosssI've written in plain css and never bothered learning sass, at first I was eager to learn sass but as I got into it, it made things more complex for my little brain. I've seen countless design systems that are written in sass that are just literally hard to maintain and hard to overwrite.

[@user-de8ev2bn2d]

tailwindcss is the best

[@jaydeep-p]

It is sufficient, not best

[@WadieGamer]

You mean cluttered HTML

[@GabrielSouza-sz5ju]

@@WadieGamer What's the problem with that? Most of the time you are looking at both the HTML and CSS so it's convenient to have both at the same place, specially since you don't have to look at multiple sections in different files to know which styles apply to that specific element. When you have a style mess in the CSS hidden away from the HTML, that just makes the HTML artificially simpler. It's still just as complex when you have to make modifications

[@nicolashervy7544]

Tailwind is better than html3.2 😀

[@WadieGamer]

@@nicolashervy7544 what do you mean, HTML's current version is HTML5

[@NicholasShanks]

1) BEM is the worst scourge on the world ever to have been invented. 2) People don't say "1 through 10" they say "1 to 10". 3) Maths has an "s" at the end. 4) A "pound" sign looks like this: £. The sign that looks like # is called "hash". I'm sick of listening to your accent, so that's as far into the video as I got.

[@zyruks4386]

I'm trying to get us to use Sass at work. We use Tailwind, but in the end we have the globa.css full of classes because tailwind doesn't cover everything. The truth is tailwind has its place, but when it comes to large projects it becomes difficult to manage it.

[@noseprogramar]

thanks 🩷

[@gangasaikumarg7393]

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

[@gangasaikumarg7393]

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