Apply rules to list of parent classes

Viewed 26

I have the below LESS stylesheet and I know there has to be a better way to organize this. Is the only option to create a map containing the classes and a mixin perhaps to repeat the styles?

// child div is injected by JS
    .ddemrcontent > span, .blocksmarttemplate > span, .blocktoken > span {
        display: inline-flex;
        align-items: center;
        min-height: 1.7rem;
        margin-top: 0.2rem;
        padding-left: 0.2rem;
    }

    .ddfreetext {
        display: flex;
        min-height: 1.7rem;
        margin-top: 0.2rem;
    }

    .ddemrcontent > span:hover, .blocksmarttemplate > span:hover, .blocktoken > span:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    .ddemrcontent > span {
        border-left: 4px solid cadetblue;
    }

    .blocksmarttemplate > span {
        border-left: 4px solid burlywood;
    }

    .blocktoken > span {
        border-left: 4px solid #8a7090;
    }

    .ddfreetext {
        border: 1px dashed black;
    }

UPDATE Here is the best I've been able to come up with. Since the & parent selector won't apply to each distinct parent selector (that are comma delimited) I think I am forced to use a mixin and call it to apply the rules for each parent I have. Would love to hear if there's still a better way.

.dyndoccontent(@color) {
    & > span {
        display: inline-flex;
        align-items: center;
        min-height: 1.7rem;
        margin-top: 0.2rem;
        padding-left: 0.2rem;
        border-left: 4px solid @color;

        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

// child div is injected by JS
.ddemrcontent {
    .dyndoccontent(cadetblue);
}
.blocksmarttemplate {
    .dyndoccontent(burlywood);
}
.blocktoken {
    .dyndoccontent(#8a7090);
}

.ddfreetext {
    display: flex;
    min-height: 1.7rem;
    margin-top: 0.2rem;
    border: 1px dashed black;
}
1 Answers

I would definitely recommend mixin if you have multiple parts in your less files which use the same styles. For you example i would go for a more nested way:

// child div is injected by JS
.ddemrcontent, .blocksmarttemplate, .blocktoken {
    & > span {      
        display: inline-flex;
        align-items: center;
        min-height: 1.7rem;
        margin-top: 0.2rem;
        padding-left: 0.2rem;
        
        &:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
}

.ddfreetext {
    border: 1px dashed black;
    display: flex;
    min-height: 1.7rem;
    margin-top: 0.2rem;
}

.ddemrcontent > span {
    border-left: 4px solid cadetblue;
}

.blocksmarttemplate > span {
    border-left: 4px solid burlywood;
}

.blocktoken > span {
    border-left: 4px solid #8a7090;
}
Related