Generate CSS classes and variables from Angular Material Palette

Vugar Abdullayev
3 min readMay 1, 2022


Background photo by Tim Swaan on Unsplash

In this blog, we should learn about generating CSS classes and variables from Angular Material Palette. It can also be used to strengthen some SCSS skills.

✅ Generate CSS classes from Angular Material Palette

✅ Generate CSS variables from Angular Material Palette

🗎 Source Code:

💎 Live Demo:


Let’s say we have some HTML elements like this:

Html elements for styling.

In order to change the color of elements, usually, we would do it like below: 😕

Usual and not convenient way to style elements.

Well as you see, it is already verbose 😕. Just for adding color, we have to import the palette and use a map-get function.

Solution: 🛠

What if we would able to style HTML elements just by adding classes like the below? ⬇️

Add colors using CSS classes

or even by using CSS variables? 🙂

Add colors using CSS classes

In order to achieve this, we can generate CSS classes and CSS variables from Angular Material Palette. The palette is actually a SCSS map which is like a Map object in Javascript.

Assume we have a palette like the below:

Sample palette

So let’s add a new file called generate-material-classes.scss which would include the below code.

Note: we are going to simplify below code later in this post 🚀.

Generate angular material classes version 1

Basically, we iterate over key/values for each palette and add CSS classes. We also append those key/values to an array which we use for root to generate CSS variables.

Now in styles.scss file:

@import 'generate-material-colors';@include generate-material-classes();

Now we can use classes like app-primary-60 and so on.

Also, let’s confirm the solution by inspecting CSS variables via devTools:

Generated CSS variables

Beautiful, is not it? 😎

Optimized solution: 🚀

As you see we add 3 different mixins for generating primary, accent, and warning colors in the above solution 😕. So let’s simplify this by using a single function with parameters:

Generate angular material classes and CSS variables: optimized version

That’s all hope you enjoyed it and found it useful. Thanks for reading.🍍

🗎 Source Code:

About me: I am a junior front-end developer.


You can also check out my other blogs or projects 💎:



Vugar Abdullayev