Article

Useful Color Generators in SCSS

Jan 19, 2020 3,140
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. 😙

Ahmet Yusuf
Ahmet Yusuf

As a full-stack developer with a master’s degree in Electrical and Computer Engineering, I’m deeply passionate about web design and development. I enjoy exploring new technologies and sharing insights into creating user-centered digital experiences in this exciting field.

Related Articles

You may also like

See all posts
Securing WebSocket Channels in Local Development: A Guide with Soketi and Laravel Valet cover

Securing WebSocket Channels in Local Development: A Guide with Soketi and Laravel Valet

In this tutorial, we will demonstrate how to set up private channels using Laravel Valet and Soketi. (...)

Read article
Web Design Quality Impact on the User cover

Web Design Quality Impact on the User

Bringing users to visit a website can be an easy task compared to converting them to be returning vi (...)

Read article
Database Relationships Explained cover

Database Relationships Explained

This article will help you understand the concept of the database relationships. Understating the da (...)

Read article