It does take a bit of setup the first time around, but once you've built this out, it's so handy to simply plug 'n play it into all of your projects going forward. Update the maps, and all of custom properties and utility classes are instantly generated. It's like magic. The type of magic we'll learn in my course! 😉 kevinpowell.co/sass
Man, the timing of your videos is always spot on with something I'm doing in the real world. These last few videos have been so helpful as someone who wants to get away from using bootstrap and start using their own custom templates. Great video Kevin!
Hah, yeah a little bit. I do like utility classes, but not to that extent! Something like this, I feel, gives a nice middle ground without going all in... though if you really wanted, you could push it and have an entire system built out I guess... but then you could just use tailwind instead, lol.
@@KevinPowell Tailwind seems like it could be a perfect set of utility classes when used in conjunction with SASS. Instead of adding a long list of classes to an element, you could create new styles by composing Tailwind classes into single semantic classes. This simplifies the markup and move the cruft into the stylesheet where it belongs. Even better, you could run the final CSS into an optimized to remove the redundant styles and attributes.
@@bobweiram6321 all you mentioned is actually doable in tailwind. You can create your own classes and then use @apply inside. Also there is purge, which will remove all unused classes from your production css.
@@Bambo3RUN Cool! Tailwind's marketing is terrible. There's hardly any mention of this style of development. The focus is all on rapid styling, which inherently implies a tradeoff. Any developer who cares about their code is going to scoff at seeing a long list of classes applied to elements instead of clean classes.
This is mind blowing :) I am trying to refactor my scss code as much I can each day, this is giving me lot to learn and explore, also easy to understand as its same as javascript.
ooooohhh! would be neat to see a means of building out something like this for light-mode/dark-mode that uses user preferences first but a toggle overrides as well!
One thing thats comes to my mind is that we could use sass variables to store css custom props. Then we can have the best of the both worlds. Clean syntax while working, easy theming later down the road. I haven't tried it so far, but it seems like it could be great
We used to use this method of generation until the Bootstrap Util API came out. Then we took parts of that and made it work for us (and be able to create properties). Quick example: codepen.io/sliver37/pen/dyNbVEd We moved to generating most of our css-properties on the server-side now (so we can customise everything through a GUI)... I could go on for hours about how insanely awesome CSS custom properties are!
Nice and very useful video Kevin. I dare to do just one small correction (to the master of S/CSS), I think you meant to write background-color: instead of color: in you -bg properties, maybe you can edit to clarify others. To compensate for just correcting you I subscribe now!
Hi all, where is the proper place to do the looping over the colors, shades etc.? After having the colors inside abstracts/ and then forwarding those to the index, should I do the color generation inside the abstract's index or it's better to have e.g. a main page layout to loop over the properties? I'm currently following the structure of one of Kevin's videos to organize my CSS better, using SASS and use/forward and would really appreciate any kind of suggestion. As always, @KevinPowell - thank you for the amazing content and your contribution to the community. If CSS was a country, you would be the president!
Can you explain the purge thing you mentioned at the end where we can erase all the unused classes and what not, that sounds like a golden tip that Ive never heard of
I learned so much from this video. Thanks so much Kevin Powell! When I hear people talk about needing a "design system" I think of using stuff like this - am I correct to think this?
Can you make a video in complete project using sass with folder structure,mixins, variables...,etc It will help my practice.. Can u do it for your subscriber.
Custom properties are more useful than Sass variables. They open up a lot of doors that you can't do with a variable, since a variable is rendered before it reaches the browser.
Amazed by your scss skill like other one, thanks for sharing. One request Kevin, can you please make a video for complete project setup using nodeModules for Html, Css, Scss etc from scratch ? (as i seen on your github repo for project new-website 2 days ago) Like now a modern days how can we write commands in package.json file in scripts and run npm commands etc. This will help us to make advance project by using NPM. Or any better way you can suggest for the same...
You can watch the livestreams of when I made that site over on Twitch :). I will eventually do a series on YT as well, they just take a long time to put together.
Hi Kevin, thanks for sharing these tips. Only one question, within the media query :root is specified. How the mq() mixin detect the root pseudo class in order to place within the media query?
I feel im missing (still learning) somthing and wondered your advice - i want to use javascript to dynamically choose the :root {} variables used. Essentally a theme switcher based off an returned api string ie {theme_1: false, theme_2: true} all the variables ect are saved in the sass file ie :root[theme_1] {somecolorVar} :root[theme_2] {somecolorVar2} and the javascript would be able to tell scss in some way(by setting an attr?) we are now wanting the colour,fonts,vars from theme_2. Or im missing the ball... any guidance on this pattern would be a great help and thanks for your amazing content Kevin!
Hi Kevin, thank you for your always very useful videos. Question: Is there a way to purge unused custom props like some postcss plugins do with css classes? Thanks
Fantastic video! I'm trying to output custom-property colors instead of a static colors in the .bg and .text helper classes but no luck. Anyone figured out how?
Shouldn't you be using the placeholder selector for those utility classes? Along with @extend for using them. That way you won't "pollute" the class names in markup (especially if you're following methodologies like BEM) and somewhat "treeshake" the unused ones. Before postcss processing and before cssnano takes over 😜
I like using some utility classes in my HTML. I don't go overboard, but I find it a lot easier having a handful for certain things, like colors, background-colors, and all that. But if you really don't like that at all, then you could turn them into placeholders for sure!
Hey Kevin, really thanks for the good content. Did you pick all the shades one by one? Maybe some tool?.I have heard about a methodoly called BEMIT. Could u tell us something about it?? Maybe an example😋
Great video KP! Since we are converting SASS variables to custom properties, we no longer can use the rgba function of SASS for opacity. What is your take on that? Converting all colors to RGB?
Yeah, that is a downside. I do have them all as HSL here, so if I wanted to I could approach it a little differently and give myself the option of having an alpha value in there... I find I use that less than I used to though, so not a huge dealbreaker for me. If a project required a lot of alpha values, I might just stick with the map, and use a color function to pull the colours out and allow me to still use Sass's rgba() function.
I have noticed that you tend to create css variables with more colors, fonts, font sizes, and other styling properties than what is necessary for their function in your web project. I am curious to know why you do this and what benefits you see from it.
Hey Kevin, nice video! I just wondered how you were able to watch the compiled css in real time while typing the scss? Do I need some kind of extension for vscode? I am building a static Nuxt Application and can't seem to see such a preview...Thank you!
What plugin are you using to display the colours in the IDE? Do you have a repo with all this finished (margin, padding..etc)? What do you think about scss of bootstrap?
Custom properties are just as good for performance as a regular property from everything I've seen. As for bloat with mixins, it depends how you use them, and for some things you could use extends instead. But in general I'm using mixins because all the values aren't the same every time. If you want to really worry about optimizing, all out utility classes and a purge CSS at the end is probably the best, like Tailwind does.
I have a very confusing question : Suppose I am creating Abstract folder in my Project in which i have different scss files [like: responsive.scss, variable.scss, mixins.scss, global.scss, etc.. and all these files i have @use in _index.scss file]. and i also importing "index.scss" file in every style.scss which are created by me. But now my question is - "How can I use [variable in mixin] or [responsive in mixin] or [mixin in global] or [responsive in global] ?" Is it necessary for importing all scss files in each other ignoring the same in abstract folder.... Can somebody help me? ~Thanks in Advance.
The reasoning of when you do and do not need interpolation for the "value" side makes no sense to me. Can anyone recommend a web reference for how this works?
Sass variables are meant to be output as a value. So, if you use one as a value, it just works. If you want to use one anywhere else, you've got to use interpolation. There is more in the Sass documentation of course!
Kevin 1 Year Ago: * Making video * How to create an expanding search bar using :focus-within &__submit { border-radius: 50%; } Kevin: * Too embarrassed to admit mistake and stop video * spends whole time trying to recover and is forced to go back to old trusty strats. Kevin's Subs: Thank u.. for ur helpful video. ...#kevin....god bless u
Sass still can’t be replaced by straigth CSS. Just partials alone are something that is against pure CSS. Not talking about mixins, functions etc. Until pure CSS has at least partials I’m not going back again. Yes, one might say “just concate multiple CSS files with gulp/webpack” and yeah, sure, but you can hardly do that with control on all files with nesting, referencing etc. Anyway, Kevin, you are using too verbose variables. I would die writing it all the time. -cColorValue is much shorter
It does take a bit of setup the first time around, but once you've built this out, it's so handy to simply plug 'n play it into all of your projects going forward. Update the maps, and all of custom properties and utility classes are instantly generated. It's like magic. The type of magic we'll learn in my course! 😉 kevinpowell.co/sass
You should make a webpack 5 series 😁
Kevin Powell Thank you for the great content. If you have a chance you should check out Tailwind with the new JIT compiler.
Man, the timing of your videos is always spot on with something I'm doing in the real world. These last few videos have been so helpful as someone who wants to get away from using bootstrap and start using their own custom templates. Great video Kevin!
Feels like the beginnings of how Tailwind was created
Hah, yeah a little bit. I do like utility classes, but not to that extent! Something like this, I feel, gives a nice middle ground without going all in... though if you really wanted, you could push it and have an entire system built out I guess... but then you could just use tailwind instead, lol.
@@KevinPowell Tailwind seems like it could be a perfect set of utility classes when used in conjunction with SASS. Instead of adding a long list of classes to an element, you could create new styles by composing Tailwind classes into single semantic classes. This simplifies the markup and move the cruft into the stylesheet where it belongs. Even better, you could run the final CSS into an optimized to remove the redundant styles and attributes.
@@bobweiram6321 all you mentioned is actually doable in tailwind. You can create your own classes and then use @apply inside. Also there is purge, which will remove all unused classes from your production css.
@@Bambo3RUN Cool! Tailwind's marketing is terrible. There's hardly any mention of this style of development. The focus is all on rapid styling, which inherently implies a tradeoff. Any developer who cares about their code is going to scoff at seeing a long list of classes applied to elements instead of clean classes.
Is there any way to use CSS selectors with tailwind natively?
Looks like Kevin is in LOVE 😍 with Sass currently!
It really makes CSS fun again!
Yeah agree 100%
Hello!
I worked as a css developer for about 10 years. Thanks to SCSS, I'm having fun coding these days.
Thank you for always posting great videos!
I Just started to use sass to make dynamic themes, and I am in love with this!
Might just be me but this makes so much sense, a framework that your intimately familiar with. It goes with my visual way of “learning to code”.
We like your sass videos. Great work. We need more videos from you regarding sass
That shirt definitely says “geek”. I love it! Lol
Just noticed the bg- utility classes outputs color instead of background-color. Thanks for the video!
This is mind blowing :)
I am trying to refactor my scss code as much I can each day,
this is giving me lot to learn and explore, also easy to understand as its same as javascript.
On my 4th year of career, realized that I need to learn html/css/sass deeper. Thank you for your effort! Subscription!
Welcome aboard! 😊
Your videos remind me how much I used to like Sass. I should introduce it to some of my pet projects again.
This is so awesome! Never knew you could do something like this with Sass!
I just started yet with sass from your vids a few days ago...
This video is super helpful. Thanks!
YESSS!!! I love Scss/Sass! This is gold 👌
True! Pure Gold stuff!
Loving your recent videos about sass. Great video Kevin !
This is awesome Kevin.
ooooohhh! would be neat to see a means of building out something like this for light-mode/dark-mode that uses user preferences first but a toggle overrides as well!
yeah, if it's all set up with custom properties, you could make the switch pretty easily as well :D
@@KevinPowell I'd love to see a guide on the setup for such a thing. Leave it to a here's this cool thing, now expand it and make it yours!
One thing thats comes to my mind is that we could use sass variables to store css custom props. Then we can have the best of the both worlds. Clean syntax while working, easy theming later down the road. I haven't tried it so far, but it seems like it could be great
I've done it, but I'm so used to writing custom props now that I don't bother, but it does work 😊
@@KevinPowell well thank you for letting me know. This will help me a lot, especially since I work a lot with interns and junior devs :)
We used to use this method of generation until the Bootstrap Util API came out. Then we took parts of that and made it work for us (and be able to create properties).
Quick example:
codepen.io/sliver37/pen/dyNbVEd
We moved to generating most of our css-properties on the server-side now (so we can customise everything through a GUI)... I could go on for hours about how insanely awesome CSS custom properties are!
Maybe a video on Purge CSS ☺
Yes, please!
Thank you, sir, You are awesome.
Thanks sir, awesome sass utility ❤️
Nice and very useful video Kevin. I dare to do just one small correction (to the master of S/CSS), I think you meant to write background-color: instead of color: in you -bg properties, maybe you can edit to clarify others. To compensate for just correcting you I subscribe now!
Oh no, I didn't even realize, lol. Thanks :)
U r even better than the wish granting dragon that we have in dragon Ball Super ❤️
Thanks Kevin
every second my reaction was this 😳🤯
Nice work. The only issue I see with colors here is that you won't be able to take advantage of rgba() now, so opacities might become a real problem.
can you build small video on how to avoid "Cumulative Layout Shift
"
Very nice video , in the last step I think it should be background-color for bg- classes
yeah, didn't catch that while recording or edited 🤦♂️
Hi all,
where is the proper place to do the looping over the colors, shades etc.?
After having the colors inside abstracts/ and then forwarding those to the index, should I do the color generation inside the abstract's index or it's better to have e.g. a main page layout to loop over the properties?
I'm currently following the structure of one of Kevin's videos to organize my CSS better, using SASS and use/forward and would really appreciate any kind of suggestion.
As always, @KevinPowell - thank you for the amazing content and your contribution to the community. If CSS was a country, you would be the president!
awesome bro!
I get some good psdt very time I see nested foor loop, pretty good explanation tho
Thank You So Much
Can you explain the purge thing you mentioned at the end where we can erase all the unused classes and what not, that sounds like a golden tip that Ive never heard of
very cool!
You should definitely check out Tailwindcss JIT. I know you're gonna love it!
I'm not a huge fan of Tailwind :\. That JIT looks cool, but I actually enjoy writing CSS, even if I'm sprinkling in utility classes :)
Love your shirt Kevin!
I learned so much from this video. Thanks so much Kevin Powell! When I hear people talk about needing a "design system" I think of using stuff like this - am I correct to think this?
I love that T-shirt!
Can you make a video in complete project using sass with folder structure,mixins, variables...,etc
It will help my practice..
Can u do it for your subscriber.
Looks like Tailwind with extra steps :)
That is a very clean and fast way to organize any property, I like that.
But why would you output css variables for the colors if you keep using Sass?
Custom properties are more useful than Sass variables. They open up a lot of doors that you can't do with a variable, since a variable is rendered before it reaches the browser.
Thanks!
Ps: cool shirt 😂
nice one 👏
How to works with color tint & shade function??
Please make a tutorial on that.
Nice T-Shirt Kevin!
Bro you are king!
Awesome. currently my scss variables is simple, lol.
when i put :root {} and @use..cssouput not working, not see that
thx
Amazed by your scss skill like other one, thanks for sharing. One request Kevin, can you please make a video for complete project setup using nodeModules for Html, Css, Scss etc from scratch ? (as i seen on your github repo for project new-website 2 days ago) Like now a modern days how can we write commands in package.json file in scripts and run npm commands etc. This will help us to make advance project by using NPM. Or any better way you can suggest for the same...
You can watch the livestreams of when I made that site over on Twitch :).
I will eventually do a series on YT as well, they just take a long time to put together.
@@KevinPowell Sure... 🙏
Hi Kevin, thanks for sharing these tips. Only one question, within the media query :root is specified. How the mq() mixin detect the root pseudo class in order to place within the media query?
That was excellent
I feel im missing (still learning) somthing and wondered your advice - i want to use javascript to dynamically choose the :root {} variables used. Essentally a theme switcher based off an returned api string ie {theme_1: false, theme_2: true} all the variables ect are saved in the sass file ie :root[theme_1] {somecolorVar} :root[theme_2] {somecolorVar2} and the javascript would be able to tell scss in some way(by setting an attr?) we are now wanting the colour,fonts,vars from theme_2. Or im missing the ball... any guidance on this pattern would be a great help and thanks for your amazing content Kevin!
Damn that's nice T-shirt haha
Hi Kevin, thank you for your always very useful videos. Question: Is there a way to purge unused custom props like some postcss plugins do with css classes? Thanks
Fantastic video! I'm trying to output custom-property colors instead of a static colors in the .bg and .text helper classes but no luck. Anyone figured out how?
Shouldn't you be using the placeholder selector for those utility classes?
Along with @extend for using them.
That way you won't "pollute" the class names in markup (especially if you're following methodologies like BEM) and somewhat "treeshake" the unused ones. Before postcss processing and before cssnano takes over 😜
I like using some utility classes in my HTML. I don't go overboard, but I find it a lot easier having a handful for certain things, like colors, background-colors, and all that. But if you really don't like that at all, then you could turn them into placeholders for sure!
Hey Kevin, really thanks for the good content. Did you pick all the shades one by one? Maybe some tool?.I have heard about a methodoly called BEMIT. Could u tell us something about it?? Maybe an example😋
I picked the colors, and then just played with the Lightness value for the shades of each one 😊
Great video KP! Since we are converting SASS variables to custom properties, we no longer can use the rgba function of SASS for opacity. What is your take on that? Converting all colors to RGB?
Yeah, that is a downside. I do have them all as HSL here, so if I wanted to I could approach it a little differently and give myself the option of having an alpha value in there... I find I use that less than I used to though, so not a huge dealbreaker for me.
If a project required a lot of alpha values, I might just stick with the map, and use a color function to pull the colours out and allow me to still use Sass's rgba() function.
When you pick your color map do you just split the window 5 ways and take a sample from each section to get your 100-500 shades?
Best shirt, cool video too
Thank you! 😃
Hi, you have a type scale with the key large, but in the css you include mq(small) but use the large entry of the type scale :-)
Kevin, that’s what they made on Bootstrap?
I have noticed that you tend to create css variables with more colors, fonts, font sizes, and other styling properties than what is necessary for their function in your web project. I am curious to know why you do this and what benefits you see from it.
🤯
Hey Kevin, nice video! I just wondered how you were able to watch the compiled css in real time while typing the scss? Do I need some kind of extension for vscode? I am building a static Nuxt Application and can't seem to see such a preview...Thank you!
It’s just another tab open in vscode and splitting the view into 2 panes
I wonder how this is better than using sass variables directly?
What plugin are you using to display the colours in the IDE?
Do you have a repo with all this finished (margin, padding..etc)?
What do you think about scss of bootstrap?
No plugin for the colours. That's just VS Code. As for a repo, I have an upcoming video in a few weeks 😊
What about browser perfomance using a) those mixins (bloated css) and b) rendering properties instead of sass variables? Btw. Great explanation 😊
Custom properties are just as good for performance as a regular property from everything I've seen.
As for bloat with mixins, it depends how you use them, and for some things you could use extends instead. But in general I'm using mixins because all the values aren't the same every time.
If you want to really worry about optimizing, all out utility classes and a purge CSS at the end is probably the best, like Tailwind does.
@@KevinPowell Yes, I think, there is to much unnecessary web traffic due to unused options in CSS and JS these days.
I have a very confusing question :
Suppose I am creating Abstract folder in my Project in which i have different scss files [like: responsive.scss, variable.scss, mixins.scss, global.scss, etc.. and all these files i have @use in _index.scss file]. and i also importing "index.scss" file in every style.scss which are created by me. But now my question is - "How can I use [variable in mixin] or [responsive in mixin] or [mixin in global] or [responsive in global] ?" Is it necessary for importing all scss files in each other ignoring the same in abstract folder.... Can somebody help me?
~Thanks in Advance.
The reasoning of when you do and do not need interpolation for the "value" side makes no sense to me. Can anyone recommend a web reference for how this works?
Sass variables are meant to be output as a value. So, if you use one as a value, it just works. If you want to use one anywhere else, you've got to use interpolation. There is more in the Sass documentation of course!
can we use sass variable (color) inside svg to change color of svg i.e. Stroke and fill. Please suggest
If we want to progress our CSS should we start with SaSS more than PostCSS?
Sass is most common in the enterprise right now as it has been around longer. I prefer PostCSS personally, which is what Tailwind uses.
What's the price on the sass course (when it opens)? :)
Great video, but I don't see myself doing this 😅
where is the repo?
How would you do this in react though?
...you'd use Sass and link to your stylesheet? Just because you're using React doesn't mean you can't link to a stylesheet like you normally would 😊
It's hard for me to understand. I like the video, but I should go to SASS video before returning here.
Yeah, it's a little bit of a look at the more complex stuff you can do with it :)
Kevin 1 Year Ago:
* Making video *
How to create an expanding search bar using :focus-within
&__submit {
border-radius: 50%;
}
Kevin:
* Too embarrassed to admit mistake and stop video *
spends whole time trying to
recover and is forced to go back to old
trusty strats.
Kevin's Subs:
Thank u.. for ur helpful video. ...#kevin....god bless u
SASS is what happens when a python programer becomes a web developer
Second
Sass still can’t be replaced by straigth CSS. Just partials alone are something that is against pure CSS. Not talking about mixins, functions etc. Until pure CSS has at least partials I’m not going back again. Yes, one might say “just concate multiple CSS files with gulp/webpack” and yeah, sure, but you can hardly do that with control on all files with nesting, referencing etc.
Anyway, Kevin, you are using too verbose variables. I would die writing it all the time. -cColorValue is much shorter
Its not easy i am very lazy
third