将规则应用于父类列表

Question

我有下面的 LESS 样式表，我知道必须有更好的方法来组织它。创建包含类和 mixin 的地图是否可能是重复样式的唯一选择？

// 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;
    }

更新 这是我能想到的最好的。由于 & 父选择器不适用于每个不同的父选择器（以逗号分隔），我想我不得不使用 mixin 并调用它来为我拥有的每个父选择器应用规则。 很想知道是否还有更好的方法。

.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;
}

Answer 1

如果您的 less 文件中有多个使用相同样式的部分，我绝对会推荐 mixin。 以你为例，我会采用更嵌套的方式：

// 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;
}