SASS: Are there any features to avoid repetitions and lines of code color variations?

Question

Problem situation

I am creating a palette of colors that vary a lot in their references, being 10% of the base color down. For example:

$primary: #0069FF;

A 10% subtraction of this value is:

$primary-900: #1977FF;

Yeah, I’ll play up primary-100, where its value is: #E5F0FF.

Backgrounds variants

These backgrounds also vary, and I need to create a class name for each background variation... for example:

.bg-danger-100 {
    background-color: $danger-100;
    color: $danger;
}
.bg-danger-200 {
    background-color: $danger-200;
    color: $danger;
}
(...)

.bg-warning-100 {
    background-color: $danger-100;
    color: $danger;
}
.bg-warning-200 {
    background-color: $danger-200;
    color: $danger;
}
(...)

Variant texts

.text-danger-100 {
    color: $danger-100;
}
.text-danger-200 {
    color: $danger-200;
}
(...)

This gets very laborious as the color variations of the palette appear. And I wonder if there is a function that names these classes, as well as adds the relevant values to their variations?

Are there any feature to avoid repeats and lines of codes the color variations?

Answer 1

Sass works perfectly in our favor to automate repetitive tasks. And to solve the problem of creating classes, we need to establish some basic knowledge.

First, create a mixin, in my case, called color-Modifier. In it I get some parameters...

@mixin color-modifier($attribute: 'color', $prefix: '-', $effect: 'none', $percent: 0%, $sufix: '') {
}

The Legal, is that in attribute, one can define a property, as background-color, color, or among other relevant properties or equivalent to the following algorithm:

@mixin color-modifier($attribute: 'color', $prefix: '-', $effect: 'none', $percent: 0%, $sufix: '') {
    @each $name, $hex in $colors {
        @if $effect == none {
            &#{$prefix}#{$name} { #{$attribute}: $hex; }
        } @else if $effect == darken {
            &#{$prefix}#{$name}#{$prefix}#{$sufix} { #{$attribute}: darken($hex, $percent); }
        } @else if $effect == lighten {
            &#{$prefix}#{$name}#{$prefix}#{$sufix} { #{$attribute}: lighten($hex, $percent); }
        }
    }
}

In this algorithm, the class is mounted according to the parameter of 'Effect', where the function Darken or lighten will darken or brighten a color.

Now, when I want a class to inherit the values relative to my color mapping, simply use the declarative:

.text {
   @include color-modifier(
        $attribute: 'color',
        $prefix: '-',
        $effect: none,
        $percent: 0%,
        $sufix: ''
    );
}

So in that algorithm you have a way out:

.text-primary {
  color: #0069FF;
}
.text-danger {
  color: #D36161;
}
.text-warning {
  color: #FFC107;
}
.text-info {
  color: #17A2B8;
}
.text-indigo {
  color: #7700FF;
}
.text-dark {
  color: #000;
}

And you can go much further with the same algorithm... For example: If you add the effect, and a suffix, with the following declarative as an example:

@include color-modifier(
        $attribute: 'color',
        $prefix: '-',
        $effect: darken,
        $percent: 10%,
        $sufix: '100'
    );

We’ll have the following exit:

.text-primary-100 {
  color: #0054cc;
}
.text-danger-100 {
  color: #c83939;
}
.text-warning-100 {
  color: #d39e00;
}
.text-info-100 {
  color: #117a8b;
}
.text-indigo-100 {
  color: #5f00cc;
}
.text-dark-100 {
  color: black;
}