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