Writing color classes for your project could take a lot of your time. luckily, SCSS functions will make this easier. In this tutorial, we will learn how to make:

background set color set shadow set

We will start by making our Color list:

$list : (

silver: #bdc3c7,

asbestos: #7f8c8d,

blue: #3498db,

wet-asphalt: #34495e,

purple: #8e44ad,

green: #2ecc71,

red: #c0392b,

pink: #e74c3c,

carrot: #e67e22,

orange: #f39c12

);

Now, let’s make our mixins:

// This mixin will generate background-color property for the colors in our list

@mixin background-color($args) {

background-color: $args;

} // This mixin will generate color property for the colors in our list

@mixin inner-color($args) {

color: $args;

} //This mixin will generate box-shadow property for the colors in our list

@mixin shadow-color($args) {

box-shadow: inset 0 123px 190px -30px $args; // of course you can change the values to suit your work

}

To generate the above mixins from our list, we have to write this function:

@each $name,$color in $list {

.#{$name}-background {@include background-color($color);}

.#{$name}-color {@include inner-color($color);}

.#{$name}-shadow {@include shadow-color($color)}

}

The above code will take each color from our list and generate three classes for it, for example, if we take our first color silver: #bdc3c7 we will see those classes in our compiled css file:

.silver-background {

background-color: # bdc3c7 ;

}

.silver-color {

color: # bdc3c7;

}

.silver-shadow {

box-shadow: inset 0 123px 190px -30px #bdc3c7;

}

That’s all 😄

In the same way, you can write any mixins and functions to generate classes from the colors in the list, like border colors for example.

I hope you find this tutorial useful. 😙