Different color classes that control the same stuff

Question

I have this code...

& .light-green {
 background: linear-gradient(135deg, #128465 0%, #99ca3c 100%);
 height: 100%;
 & .card__header {
 background: #128465;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #128465 transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #128465;
 }
 & .card__actions {
 background: linear-gradient(-45deg, #128465 0%, #99ca3c 100%);
 }
}
& .dark-green {
 background: linear-gradient(135deg, #336666 0%, #33bc69 100%);
 height: 100%;
 & .card__header {
 background: #336666;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #336666 transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #336666;
 }
 & .card__actions {
 background: linear-gradient(135deg, #336666 0%, #33bc69 100%);
 }
}
& .aqua {
 background: linear-gradient(135deg, #006699 0%, #33bc99 100%);
 height: 100%;
 & .card__header {
 background: #006699;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #006699 transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #006699;
 }
 & .card__actions {
 background: linear-gradient(135deg, #006699 0%, #33bc99 100%);
 }
}
& .blue {
 background: linear-gradient(135deg, #294c95 0%, #4abed8 100%);
 height: 100%;
 & .card__header {
 background: #294c95;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #294c95 transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #294c95;
 }
 & .card__actions {
 background: linear-gradient(135deg, #294c95 0%, #4abed8 100%);
 }
}
.blue-purple {
 background: linear-gradient(135deg, #50278f 0%, #4a8cd8 100%);
 height: 100%;
 & .card__header {
 background: #50278f;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #50278f transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #50278f;
 }
 & .card__actions {
 background: linear-gradient(135deg, #50278f 0%, #4a8cd8 100%);
 }
}
.purple {
 background: linear-gradient(135deg, #424c9f 0%, #c16cf9 100%);
 height: 100%;
 & .card__header {
 background: #424c9f;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #424c9f transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #424c9f;
 }
 & .card__actions {
 background: linear-gradient(135deg, #424c9f 0%, #c16cf9 100%);
 }
}
.purple-pink {
 background: linear-gradient(135deg, #522cae 0%, #be4f7e 100%);
 height: 100%;
 & .card__header {
 background: #522cae;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #522cae transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #522cae;
 }
 & .card__actions {
 background: linear-gradient(135deg, #522cae 0%, #be4f7e 100%);
 }
}
.purple-orange {
 background: linear-gradient(135deg, #ce00aa 0%, #ffa600 100%);
 height: 100%;
 & .card__header {
 background: #ce00aa;
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 border-color: #ce00aa transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: #ce00aa;
 }
 & .card__actions {
 background: linear-gradient(135deg, #ce00aa 0%, #ffa600 100%);
 }
}

now as you can see its basically the same code the only thing that changes are the gradients and the colours.. but Im not entirely sure how I can dry this up??

any help would be appreciated!

Answer 1

1. Move all your duplicate code into a class, say gradient.

2. Pick better names. A class name like light-green can mean anything, can be put on anything and really is not that great.

   I like Microsoft's (Fabric UI) method to fix this. You define your base class, say gradient, and then add your customizations via a subclass, say gradient--light-green. The double hyphen helps a lot when you come across these in the wild.

3. I don't know SASS but given my knowledge of CSS, you should be able to make a new class with all the colours removed from your class. This will be your base class. Take:

   & .gradient {
    height: 100%;
    & .card__header {
    &::before {
    content: "";
    display: inline-block;
    width: 0;
    position: absolute;
    height: 0;
    left: 0;
    margin: 0 auto;
    right: 0;
    top: 100%;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    }
    }
   }
   

4. You then just need to remove this from your other classes. Leaving something like:

   & .gradient--light-green {
    background: linear-gradient(135deg, #128465 0%, #99ca3c 100%);
    & .card__header {
    background: #128465;
    &::before {
    border-color: $color1 transparent transparent transparent;
    }
    }
    & .icon-icon-resolved,
    & .icon-icon-file {
    color: #128465;
    }
    & .card__actions {
    background: linear-gradient(-45deg, #128465 0%, #99ca3c 100%);
    }
   }
   

5. Notice that all of these are the same. (Except light-green, which has a gradient with -45deg, where all others have 135deg)

6. Learn how to use a mixin, and make something like: (IDK if it works)

   @mixin gradient-colors($color1, $color2) {
    background: linear-gradient(135deg, $color1 0%, $color2 100%);
    & .card__header {
    background: $color1;
    &::before {
    border-color: $color1 transparent transparent transparent;
    }
    }
    & .icon-icon-resolved,
    & .icon-icon-file {
    color: $color1;
    }
    & .card__actions {
    background: linear-gradient(135deg, $color1 0%, $color2 100%);
    }
   }
   & .gradient--light-green {
    @include gradient-colors(#128465, #99ca3c);
   }
   

And so now you're left with:

& .gradient {
 height: 100%;
 & .card__header {
 &::before {
 content: "";
 display: inline-block;
 width: 0;
 position: absolute;
 height: 0;
 left: 0;
 margin: 0 auto;
 right: 0;
 top: 100%;
 border-style: solid;
 border-width: 10px 10px 0 10px;
 }
 }
}
@mixin gradient-colors($color1, $color2) {
 background: linear-gradient(135deg, $color1 0%, $color2 100%);
 & .card__header {
 background: $color1;
 &::before {
 border-color: $color1 transparent transparent transparent;
 }
 }
 & .icon-icon-resolved,
 & .icon-icon-file {
 color: $color1;
 }
 & .card__actions {
 background: linear-gradient(135deg, $color1 0%, $color2 100%);
 }
}
& .gradient--light-green {
 @include gradient-colors(#128465, #99ca3c);
}
& .gradient--dark-green {
 @include gradient-colors(#336666, #33bc69);
}
& .gradient--aqua {
 @include gradient-colors(#006699, #33bc99);
}
& .gradient--blue {
 @include gradient-colors(#294c95, #4abed8);
}
& .gradient--blue-purple {
 @include gradient-colors(#50278f, #4a8cd8);
}
& .gradient--purple {
 @include gradient-colors(#424c9f, #c16cf9);
}
& .gradient--purple-pink {
 @include gradient-colors(#522cae, #be4f7e);
}
& .gradient--purple-orange {
 @include gradient-colors(#ce00aa, #ffa600);
}