Useful Color Generators in SCSS

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:

  1. background set
  2. color set
  3. 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. 😙