CSS is getting better, but Sass is still relevant

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

[@LePhenixGD]

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

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

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

[@damien083]

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!

[@Knards]

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

[@AgentZeroNine1]

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

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

[@peteharrison3241]

I'd be very interested how you managed snippets and defaults between projects. As you mentioned, sometimes you don't need long lists of utility classes or particular subsets of CSS, so how do you manage your vast number of both specialist and regular CSS ( and possibly JavaScript) etc?

[@arkson888]

Always brilliant. Concise explanation about Sass usage 👌

[@BigBlueRabbit]

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

[@kelindrawn]

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

[@stephensidor5743]

This might be a newbie question, but has anyone figured out how to disable Dart sass from throwing errors in ---watch mode using live server in vs code? I've just started using sass and while I'm typing out css in a sass file, for example if I'm beginning to type out a variable $ the page goes blank and it says "Error: Expected identifier" and it's really annoying and choppy to have these "errors" which aren't errors keep coming up. I've tried all the flags that dart sass offers to no avail. Just seeing if anyone else has fixed this problem/annoyance. Thanks!

[@muhammadilhamrobani7042]

My favorite channel for learning css

[@VivekYadav-up7uu]

please keep making videos on the latest css properties

[@johnborron1059]

When you were doing the line-heights, what is that character that represents 'between' two sizes. Never seen it before. BTW that process looks excellent for graphic design work.

[@evasokolovsky166]

Thanks!

[@KevinPowell]

Thank you so much 🙏

[@blokche_dev]

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

[@JasonJA88]

Super Awesome Style Sheet👍

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

[@christianstoyanov2501]

Interested to know, if this is still relevant 1 year later today

[@Cahnisama]

does the earlybird cupom combo with the purchase parity cupom?

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

[@oliver139]

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

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

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

[@beinyourguard]

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

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

[@BrianMoralesMarshall]

One year later, is scss still relevant and useful?

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

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

[@gangasai_kumar_G]

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.

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

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

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

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

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

[@BigBlueRabbit]

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

[@kal.leroux]

yeah but tailwind make it easy to maintain code

[@seeker3794]

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

[@alirezatorabi4695]

thanks ❤

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

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

[@TheCârtiță]

ill consider sass whed ill doo very good with css

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

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

[@stevecrabtree9141]

Fun video

[@DuK-2102]

Sass is awesome

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

[@GiorgiKavtaradze-cy1ye]

🔥❤👍👏

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

[@alexpanteli3651]

Use tailwind

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

[@MizManFryingP]

SASS is great but unfortunately it is maintained by nutjobs

[@尼古拉丝土豆]

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.

[@noseprogramar]

thanks 🩷

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

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