2
\$\begingroup\$

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!

\$\endgroup\$
3
\$\begingroup\$
  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);
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.