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.
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.
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!
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!
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 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?
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.
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.
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?
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.
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!
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 :)
@@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.
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.
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
@@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.
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!
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.
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.
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?
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.
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.
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.
@@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.
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.
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.
@@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.
@@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
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.
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.
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.
true, since i learnt about sass, tailwind and typescript, i use them on every practicing projects
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.
I use Parcel Bundler, it's pretty awesome
Thanks!
Thank you so much 🙏
12:46 Fancy way to add hue rotation! I'll definitely steal that one
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!
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!
You can map your compile file to find the good place of the nested element.
Every browser has the option.
Sourcemaps helps the dev tools in your browser point out the exact line the rule is written on, and which scss-partial.
Maybe we need a video on sourcemaps
I know source maps are a thing, but it's not really something I can use in my terminal/editor to edit said code.
You can probably improve your workflow a lot if this is something you ever need to do
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.
You know you can just make a css class that does display: flex; flex-direction and use it everywhere needed. No needed for that?
@@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?
That UPPERCASE mixin just looked like the creation of a maintenance nightmare.
I love SASS. True, I am used to it, but I still delight in using it
My favorite channel for learning css
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.
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.
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.
please keep making videos on the latest css properties
Shadow DOM + Custom Properties + CSS Module Scripts + other new CSS features alongside whats been around for a while = perfection
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?
For the If/Else example you could also just use em for line-height, no? Thanks for the video!
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.
Always brilliant. Concise explanation about Sass usage 👌
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!
Interested to know, if this is still relevant 1 year later today
Super Awesome Style Sheet👍
whats the difference between sass and tailwind
Still relevant for the organisation of your styles across multiple files/folders too.
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
One year later, is scss still relevant and useful?
does the earlybird cupom combo with the purchase parity cupom?
Is CSS nesting actually available now?
today it is, after 7 months that you ask for it lol
How about PostCSS vs Sass?
Recently I think that Sass is still my favorite against PostCSS..
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?
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 :)
@@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.
for me, SASS is still way easier and more organized to use. it's my favorite preprocessor and I love to use it.
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.
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
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.
I just can't handle debugging sass - it's so annoying because line numbers from web inspector never line up.
The solution to this problem is source maps :)
@@jarnalyrkaror just use pure CSS and drop the overhead
@@BigBlueRabbit Sure, but how about organizing the stylesheets? They should be minified to one file anyway, so some overhead is probably unavoidable
@@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.
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!
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.
Question should I master css vanilla to try learn scss?
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.
does it have all browsers support
It compiles down to vanilla CSS, so yes. (Note that you do need to have a SASS preprocessor to handle the conversion.)
thanks ❤
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?
yeah but tailwind make it easy to maintain code
Yes it really makes code a lot more messier....
I won't stop using sass until css is as good or better than scss
Native css still has a lot to do to stop me using SCSS.
I used native css nesting in production app, got complaints for users, had to recompile using sass and replace it bad experience
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.
@@rossclutterbuck1060 yes, support is not great, i basically used it for designing cards, turned out to be a mistake
Sorry but the language you are showing is actualy scss not sass, which has a different syntax? Other than that nice video
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.
@@jarnalyrkar thats what i thought, thx for clarification tho 👍🏻
Sass is ok for big projects but at the end is a big mess
I maintained a legacy code written using bootstrap and sass before, it was a nightmare.
Must admit I wasn’t convinced - SASS at this point just looks like unnecessary overhead. Just my opinion 😊
ill consider sass whed ill doo very good with css
Fun video
🔥❤👍👏
Mixin look like small components.
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.
Sass is awesome
Concatenating classes is bad practice, that's not a feature of Sass, it's a problem.
How so?
@@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.
@@daleryanaldover6545 I thought that was Bootstrap 😁
Use tailwind
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.
Maybe you’re right. It was all just a big misunderstanding
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.
@@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.
SASS is great but unfortunately it is maintained by nutjobs
Naww, with nesting being supported in CSS, there is almost no practical usecase for SASS.
Tailwind > CSS > SASS
Tailwind == CSS
But I agree since I never reach for sass, and been writing plain css for a long time until tailwind came out.
and tailwind is better than all
tailwindcss is the best
It is sufficient, not best
You mean cluttered HTML
@@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
Tailwind is better than html3.2 😀
@@nicolashervy7544 what do you mean, HTML's current version is HTML5
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.
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.
thanks 🩷
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
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