trjhtr

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!

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);