Generate custom props & utility classes with Sass

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

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Anth-ony]

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!

[eiestevam]

I Just started to use sass to make dynamic themes, and I am in love with this!

[support]

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”.

[jayminmaheta]

We like your sass videos. Great work. We need more videos from you regarding sass

[jonlothar]

This is so awesome! Never knew you could do something like this with Sass!

[mohan]

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.

[danygagnon]

Just noticed the bg- utility classes outputs color instead of background-color. Thanks for the video!

[borschetsky]

On my 4th year of career, realized that I need to learn html/css/sass deeper. Thank you for your effort! Subscription!

[CodecrafterArtemis]

Your videos remind me how much I used to like Sass. I should introduce it to some of my pet projects again.

[michaeld]

That shirt definitely says “geek”. I love it! Lol

[cintrond]

Feels like the beginnings of how Tailwind was created

[johnp]

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:

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!

[JohnWeland]

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!

[jadejarajdeep]

can you build small video on how to avoid "Cumulative Layout Shift
"

[georgi-kolev]

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!

[utkarshagrawal]

U r even better than the wish granting dragon that we have in dragon Ball Super ❤️

[Lulu-xxsn]

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

[muhammadissasabbagh]

Very nice video, in the last step I think it should be background-color for bg- classes

[mdraihanofficial]

How to works with color tint & shade function??
Please make a tutorial on that.

[brendanlaney]

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?