Generate custom props & utility classes with Sass
55.7 هزار بار بازدید -
3 سال پیش
-
Get updates and be notified
Get updates and be notified when my Sass course launches: https://beyondcss.dev/?utm_campaign=O...
I hate having to create utility classes for my colours when every project uses a different pallet, so I created a Sass loop to do it for me.
I still want access to custom properties though, so I have it take that map and output everything as a custom property, as well as an entire set of color and background-color utility classes.
This is one of those things that looks like it's too much work to bother with, but once it's set up, you have it forever, for every project, so in the long run, it pays off!
⌚ Timestamps
00:00 - Introduction and what we're starting with
02:01 - Creating custom properties from our map
07:30 - Adding font-sizes to our custom properties
12:35 - Generating utility classes from our maps
#css #sass #scss
--
Come hang out with other dev's in my Discord Community
💬 Discord: discord
---
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: Patreon: kevinpowell
---
My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: Instagram: kevinpowell.co
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!
I hate having to create utility classes for my colours when every project uses a different pallet, so I created a Sass loop to do it for me.
I still want access to custom properties though, so I have it take that map and output everything as a custom property, as well as an entire set of color and background-color utility classes.
This is one of those things that looks like it's too much work to bother with, but once it's set up, you have it forever, for every project, so in the long run, it pays off!
⌚ Timestamps
00:00 - Introduction and what we're starting with
02:01 - Creating custom properties from our map
07:30 - Adding font-sizes to our custom properties
12:35 - Generating utility classes from our maps
#css #sass #scss
--
Come hang out with other dev's in my Discord Community
💬 Discord: discord
---
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: Patreon: kevinpowell
---
My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: Instagram: kevinpowell.co
Twitter: Twitter: KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!
3 سال پیش
در تاریخ 1399/12/28 منتشر شده
است.
55,781
بـار بازدید شده