Is Sass still relevant?
Vložit
- Äas pÅ™idán 18. 05. 2024
- You can sign up for updates on Beyond CSS here: beyondcss.dev
🔗 Links
✅ Mike's Twitch for CSS Design system goodness: / peruvianidol
✅ Logical properties: • Write better CSS using...
✅ Stop using an extension to compile your Sass: • Stop using an extensio...
✅ My Beyond CSS course: beyondcss.dev
⌚ Timestamps
00:00 - Introduction
00:59 - Using loops for utility classes
06:26 - Improving the loop
08:56 - What about PostCSS?
09:53 - Creating colour themes
12:08 - Working with tokens
13:48 - What about CSS Custom Properties?
14:53 - More with colours
#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 CZcams 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!
![[Vowel]ë¬¼ê³ ê¸°ëŠ” 물ì—ì„œ 살아야 í•´ðŸŸðŸ¤£Fish have to live in the water #funny](http://i.ytimg.com/vi/3G9MH063Cx4/mqdefault.jpg)
I can't imagine writing plain CSS in my projects anymore, ever since i've switched to Sass. Haven't tried PostCSS yet, but i've heard it's really nice too
I only need tailwind,
"“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.â€
I was like that with less like 10 years ago. It will pass.
how about tailwind ?
i don't know sass ?
i wish i could design everything by javascript xd or css itself , we need 2 thing not 3 , i mean /html/css/js
2 is enough
I love Sass/SCSS too :D and it works nice with PostCSS, sadly it's needed for Tailwind ^^
@avfr is it though? I'm only 7 minutes in to this video, and while it's great, and I use sass, he's literally just created the tailwind padding class, and I'm not sure why you'd want to split your styling between your html and sass like that 🤷â€â™‚
I remember when I started to learn HTML and CSS to make websites the structure was terrible, I had to make the whole page with table based layouts and tags and inline attributes which are now deprecated like ( , , , border, align ...etc) but I was happy because I loved that and it was my favorite hobby, unfortunately I couldn't pursue my ambition because of many problems in my life and I never thought that I would start again. After more than a decade I started learning web development again. I wasn't as excited as I used to be until I found a few CZcams channels and nice people like (Brad, Kevin & Kyle) they make me fall in love with web development again. It changed my life and I gained a lot of experience. I'm very grateful for that :)
So happy that you're enjoying it once again! Big change coming back to it after the days of and ! Always fun to think back to that, but I'm glad we've made some progress, lol. Happy that I could help you enjoy it some more, along with Kyle and Brad. Good company to be in for sure!
Basically same here. 2002-2006 and then again 2012 to present day.
The holy trinity
Honestly, nowadays I just use it for the nesting and mixins. Insanely useful.
Kevin, love your content! It helps me to grow as a developer! Can you make video about project organization? Which tools to use, how to set up directories etc, it would be so helpful!
Even if it become irrelevant for his "job" at some point.
As a tool, it is a real time saver and simplifies working with CSS enormously.
Features like: nesting, &:hover.. and mediaqueries within its elements allow to create very specific selectors. Without worrying about parent elements. (Specificity)
Which makes it appear like a "component": encapsulated and unmodifiable from the outside.
It's also useful as a pipeline for tasks that are necessary anyway, such as auto-prefixing.
All in all, Sass is a powerful tool!
how does it compare to something like tailwind in terms of productivity?
Bro! I was just thinking about this and here you are with this video. Thank you so much!
You are a great teacher. Your examples are always so good - I think I know it, and then you show me an entire set of things I didn't know before! 😂
I love Sass! I do this on my site too-I derive CSS custom properties and utility classes from a Sass map using loops, and then I only ever need to change the config if I want different spacing or font sizes.
Cant wait for your Beyond CSS course to really learn Sass April is almost here!
kevin you're amazing man. almost all important stuff in 1 video. love this! keep up the good work man
Thanks for answering up front. Cheers!
I use sass mainly for the modular includes and nested classes, so I can structure my CSS in to different silos (I use folders for ‘defaults, composition, blocks, utilities, media queries’). I don’t really use sass variables or loops etc. so if CSS had a better include ability and nesting built in I could drop sass
It better be because I don't see how I can be without it. There is so much about it that makes it great: Allows hyper organization in files, the ability to have your own library of styles where you can mix'in components (see what I did there?? haha) to create something great. I wouldn't want to use anything else
Thank you, Kevin, huge Sass/SCSS fan I use them in almost all of my projects. They are so powerful and there is so much to learn in Sass. That being said, my main question is where did you get the Star Wars t-shirt?😂
I am working on a project that will do pretty much what you are saying!
It's a pure SASS project, that will try to organize all the data like, colors, breakpoints, font-sizes, and then make them easily available for the developer through a mixin or function. It also has some class generators, that generate classes that do various stuff and you can enable/disable them through the central configuration. Also it prints through debug the whole configuration with the current values, or a specific configuration like a list of colors or breakpoints through @debug.
I am working on the project for almost a year now and honestly it's much more than what I describe above, and after lots of alterations I believe that it is almost ready for beta hehe :D
Amazing video! as always Kevin
0:20 in and confirmed worth staying subbed to the channel. Thanks for clearing it up right away.
I always use Tailwind nowadays. It means I get PostCSS built in. There are plugins for autoprefix and nesting. Everything comes out as one file. That's all I need.
Inclusive super bloated HTML files ;)
@@holger5851 not really, tailwindcss purges everything you don't use
Thanks Kevin! 💓
I LOVE your Sass stuff! Your project setup seems so refined, and we need to see more of your workflow!
Really wow, thank so much KEV
Really informative ✨✨✨
Even with cssVariables I think a preprocessor is very useful. I only use cssvariables in cases where I need to change them dynamically on the client. Like for darkmode.
Beyond that I like my precompiled css
I actually think it helps with clarity our in my codebase if you find a cssVariable you know it's a bit special. if you find a sassvariable you know it will just compile to a static value.
All of these features are available in CSS-in-JS nowadays, with the bonus of writing logic like looping in plain JS. Sass pioneered many of these features, but when writing JavaScript components, CSS-in-JS is a lot more convenient :)
Meh css in js sucks fite me.
What if the user doesn't have JavaScript ðŸ˜
@@kalahari8295 Sass does make sense then, I suppose. Not saying it's bad, I should've mentioned that CSS-in-JS is much more convenient for my usecase
I still find CSS/SASS modules more convenient than writing it within JSX, personally.
I respect that there are purists who still want their CSS separated from JS and HTML in the source code "as they were meant to be", but I'm among those who prefer a more vertical separation of concerns through UI components that encapsulate their own HTML, CSS and JS in their source code, and CSS-in-JS is a great way to do that.
Awesome video, thanks! Does purging CSS work with dark/light mode? Those classes are not in the project at build-time, wouldn't they get purged then?
You're the best, thank you !
Thank youu!
I stopped using vanilla CSS and use SASS/SCSS in all of my projects, whether it's vanilla HTML Javascript or React JSX, etc. But I could see the benefit of other styling libraries.
I am a bit surprised that you didn't mention loops. This is the main reason for me using Sass, for example when creating complex CSS art with many elements. It seems that Post CSS has no built-in loops (although there are plugins)?
Just wanna say thanks for putting the YES answer at the start of the video and not trying to keep it as some baity secret just to make people watch til the end to find out. Your content is good enough for people to watch til the end anyway
Ok, Kevin. You've won. I deeply fell in love with CSS! Needed to mention that :) Also, your newsletters rocks! Thanks for your awesome videos.
If I can help it I'm never moving away from tailwind again. The less time I can spend in css files the better. Embracing utility classes is amazing for your workflow.
Hi Kevin, I really liked this video. But I am wondering how you did manage it, to come from this design tokens, which are maps, to this variable syntax, where everything is a variable itself. I like the idea of maps, whereas autocompletion of the sass variables is way more comfortable for the rest of the team. If I look into the bootstrap git repository, it seems that everything there is done by hand / per definition?!
About the themes - as far as I understand you can only set one theme at a time, should you generate css files for each theme? I would like to know how a user can switch themes.
Love your content Kevin, thank you!
Amazing tips! Yes, Sass is still relevant! Thank you for the video
@kevin, do you sometimes use a framework like tailwind?
Thank youuuuuuuu
I use Sass but I almost never touch in advanced features like loops and conditions, I could use only CSS with PostCSS, but I prefer to use both Sass and PostCSS, this is a nice way to separate dev files from production ones, SCSS for dev, CSS for production, just like TS and JS, and when I need some advanced feature, it will be there for me to use.
This is a good point
have you got a link to the template system? the link in your description just goes to his twitch and i couldn't see anything obvious. You should definitely do a long video on it, maybe a colab thing with peruvianidol
I was diving deeper into SASS use & forward and watched his " Stop using live sass compiler" before coming here. NGL I was disappointed if SASS wouldn't be relevant anymore judging from the video title but was glad when he said a resounding yes XD
Hey Kevin can you make a video on css resets, or the most reliable one to be precise, as there are plenty of them available to choose from
I'm a fan of Andy Bell's. There is also a good one out there by Josh Comeau. If you Google either you should find them quickly. Modern CSS doesn't really need as heavy handed a reset as we used to use imo. Of course, normalize is still good as well :)
SASS just save me lots of time when u need to deal with massive user content and different style variations. Don't think it's going away even in react.and vue projects for me.
I just learned Sass! I sure hope so haha!
you are super hero
The best teacher â¤â¤
Hey Kevin, Hope you are doing fine just want to ask you is it important to install node and sass on to our computer or now it can be done by only the vs code extension live SASS compiler???
Please do answer.
Thanks.
Cool video, very interesting. I'll probably never use it. But enjoyed watching, nonetheless.
do you have the github repo link for this? would really like to follow this pattern :D
can i ask you one question kevin, is there any way of using CSS variables in sass, I know there are variables in sass but I want variables that can modify using inline css and sass variables dont compile to CSS varialbles
Man!! You made me die at 5:18
"... because using a variable, it's just 🤨... it's goes 🫣 ... Gniaaaa 🥴" 🤣
Love your videos sir!
most of the time I'll prefer using styled-components or EmotionCSS, maybe since I'm a React developer
Kevin, one more question to you:) Should I be a confident sass user to understand your future course or it will be beginner friendly?
It's assuming zero previous knowledge of Sass 😊
Amazing content. Learned a lot about Sass and better practices. Title is a little cringy tho
Hi Kevin, did you notice your logo being broken in the animation at the start of the video?
Hey CSS Master. Nice shirt 🤘
Awesome!
Especially when you already written more than 300 lines of Vanilla css and need to refactor all of it :D
When should I use the data-set instead of classes?
I think the most useful features in sass are already in vanilla css (or coming soon), so why invest so much time in learning it unless your job demands it? In addition, css-in-js and tailwind seem to have a much brighter future than sass
Sass doesnt take that long to learn and is a useful skill to pick up. It would be like saying Typescript isnt worth learning because Javascript already has alot of what typescript has to offer lol. Even so, it's still useful and can land you a job if employers see you know how to use it.
Kevin, you have a great voice. You should get into the podcast space. Doesn't necessarily have to be tech ;)
How would this work with web components and shadow Dom?
Is there anything sass can do that javascript can't do? As a js guy I've never run into a situation I've needed sass so I never learned it because even the most complex css can be done with template literals without needing to learn a language just for styling. Am I missing something, should I learn sass?
Hi kevin i would love if you make a tailwind css tutorial.
is it possible to get the css token-system github url that you have shown in this video for learning purpose ?
Do you have a repository for these examples?
Can you do a video on baseline grids? 😉
Great T-shirt!
Thanks :D
didn't set up a project with sass in forever. Just no need for it. Postcss is more modular, faster and doesn't give me weird errors all the time. Remember node gyp error with node sass back in the day?
Yes :)
I tried watching this on mobile. But as my mobile display is small, i couldn't see the content. Is there anyway we can zoom in mobile ?. 😊
I always used SCSS instead of CSS. It's great to simplify some parts of the vanilla CSS and that was great when I was learning CSS in the beginning... but when comes to these complex examples where SASS is almost looking like a new programming language I personally don't like it.
If it comes to be necessary to add so much complexity and dynamism to the styles I prefer to use one CSS-in-JS solution because there I'll be using a programming language that I already know. Or if I need patterns and a well-structured design system I just use Tailwind. With these two solutions I rarely need to use plain CSS or SASS.
I'm a newbie in the CSS world, I write all my landings and pages in full CSS. ¿Someone can give me a hint or tip if I need to learn Sass for my small projects? thanks a lot
Kevin, I have a request.
Can you please make a full course on React js ...ðŸ™ðŸ™
I don't like to say never, so I'll just say that it's *very* unlikely 😅. I've used React, but it's really not something I'm very comfortable with, and definitely not the right person to teach it!
Ok boss.... I hope, Inshallah one day you will be also the King of React js.
Can someone explain to me why everyone is using scss specifically, where you have to use curly brackets?
I'm not using sass now a day due to unused css should be remove in order to gain pagespeed. I use that when I was a freshgrad cuz its useful for global css classes and to organize css code
I just wanna ask you something Is there any postcss plugin which convert like mt to margin-top and p to padding like Tailwind CSS
When you say "like tailwind", do you mean using the class "mt" for margin-top? It's just a set of classes that already exist, and you could use what I wrote in this one, but instead of the long-hand class names, use 'pt' or whatever. Or am I getting the question wrong?
@@KevinPowell Sorry I asked question incompletely
Here mt is CSS Property
For example
a {
mt: 10px;
}
would convert into
a {
margin-top: 10px;
}
@@KevinPowell Seems like no response. I asked you just whether you knows because I'm currently making new Postcss Plugin. Almost 85% completed
We can convert
a{
focus-bg: red;
}
To
a:focus{
background: red;
}
If already Any Postcss Plugin like exists, There won't be any use for my Plugin.
Saas is just beautiful
how did you select all the "padding" words but not above you selection in vscode? @ 8:48
after selecting the word you want to find and select press ctrl + D
Wouldn’t building the css with js be even more powerful and avoid a build step?
Vanilla ALL THE THINGS!
c_*vanilla*_beck 😉
@@KevinPowell 🤣🤣🤣
Humm, I'm wondering why have so many classes using so many margin / padding sizes? Also doesn't just having generic "padding-X" classes all over the place reduce the legibility?
Switching to sass is one of the best decisions Ive ever made
I use Less instead of Sass. I think CSS preprocessors are still useful. I also like Stylus.
The first half looks like a Making Of Tailwind to me 😅
Okay, I was waiting for this "yes" to give a like.
I do not care about variables much, but I cannot imagine styling without nesting. Writing all the selectors by hand? Just shoot me.
Adding Sass to my Django project, Any tips?
Never used Django, sorry!
My doubt about learning Sass today would be in comparison to the rise of CSS in JS libraries, getting more popular everyday. It seems like Sass is going to get obsolete somehow 🤔
Why does this create some -webkit padding classes? (-webkit-padding-before: 1rem;)
Instead of generating utility classes with SCSS, why not try tailwind?
Does the intro have an Easter egg in it? There’s usually a white “KP†in it. This time I saw a white rectangle. 🤔
Something went wrong when the video was encoding, and I have no idea why, lol.
@@KevinPowell Lol. Well at least you can see we’re paying attention. ðŸ˜
Seems to me that almost anything you can do in tailwind, you can set up in sass. I borrowed that config page straight out of bootstrap
The only feature I use from scss is // comments
I honestly had no idea that CSS itself was changing at all.
Just started learning CSS today and have no clue what's going on here. Whelp 😂
Fun fact: I love css for visual effects more than using JS.
Can you do a meaningful course on HTML5?
HTML5 specifically? No, not really. My responsive design course on Scrimba talks a bit about semantic HTML and document structure, but it's not the focus.
I will eventually create a new one on getting started with everything, which a much bigger focus on writing good HTML, but I have a few other things in the works, so it might be a long time.
Honestly I prefer using pure css. Nothing can ever go wrong with pure css and let’s say if a extension or library bcomes obsolete.. everything in the project/code needs to be changed. Not to mention, if it was a project in a company. A person without any knowledge about a specific framwork would have to learn the framework and error may arise because of this. Sass makes things easier but it is not mandatory. It is not like React or anything where it simplifies the code by alot.
Pure css is the best. Working with frameworks, you have to try to keep up with learning new frameworks from time to time. When you understand the core of css, you can create your utility tools yourself and upgrade it from project to project. The advantage of that is that any real programmer can easily understand what you've done because it's basic.
Hey I have that shirt!
How do I download sass??
Only need CSS introduce nested feature. i can ditch both SCSS and LESS.
I chose tailwind