将规则应用于父列表类

Question

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

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

更新这是我能想到的最好的。由于 & parent 选择器不会应用于每个不同的父选择器（以逗号分隔），我想我被迫使用 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;
}

将规则应用于父列表 类

Apply rules to list of parent classes

less

将规则应用于父列表类