css - 不同的选择器，同样的风格，如何在less中防止重复输出

Question

我有以下较少的代码，它导致生成四个代码块，其中三个 block 具有相同的内容。

有没有办法确保只生成两个代码块，而不必为这些元素使用以逗号分隔的长链选择器？

section.bmform {
    .thanks-for-requesting {
        .change-request {
            .highlight_bordered();
        }
    }
    .bmform-submit-container {
        .bmform_submit {
            .highlight_bordered();
        }
    }
    .btn {
        &.btn-danger {
            &.plus, 
            &.minus {
                .highlight_bordered();
            }
        }
    }
}
.highlight_bordered() {
    border-radius: 0px;
    border: 2px solid #af2222;
    font-size: 1.2em;
    line-height: 1.2em;
    padding: 4px 6px 2px 6px;
    &:hover {
        border: 2px solid #8c2828;
        background-color: #bf0808;
    }
}

以上代码生成如下代码:

section.bmform .thanks-for-requesting .change-request {
    border-radius: 0;
    border: 2px solid #af2222;
    font-size: 1.2em;
    line-height: 1.2em;
    padding: 4px 6px 2px
}
section.bmform .bmform-submit-container .bmform_submit {
    border-radius: 0;
    border: 2px solid #af2222;
    font-size: 1.2em;
    line-height: 1.2em;
    padding: 4px 6px 2px
}

section.bmform .btn.btn-danger.minus,
section.bmform .btn.btn-danger.plus {
    border-radius: 0;
    border: 2px solid #af2222;
    font-size: 1.2em;
    line-height: 1.2em;
    padding: 4px 6px 2px
}

section.bmform .bmform-submit-container .bmform_submit:hover,
section.bmform .btn.btn-danger.minus:hover,
section.bmform .btn.btn-danger.plus:hover,
section.bmform .thanks-for-requesting .change-request:hover {
    border: 2px solid #8c2828;
    background-color: #bf0808
}

这是我理想中希望生成的代码。

section.bmform .thanks-for-requesting .change-request,
section.bmform .bmform-submit-container .bmform_submit,
section.bmform .btn.btn-danger.plus,
section.bmform .btn.btn-danger.minus {
    border-radius: 0px;
    border: 2px solid #af2222;
    font-size: 1.2em;
    line-height: 1.2em;
    padding: 4px 6px 2px 6px;
}
section.bmform .thanks-for-requesting .change-request:hover,
section.bmform .bmform-submit-container .bmform_submit:hover,
section.bmform .btn.btn-danger.plus:hover,
section.bmform .btn.btn-danger.minus:hover {
    border: 2px solid #8c2828;
    background-color: #bf0808;
}

Answer 1

一个解决方案是使用扩展。通过使用扩展，它将共享相同样式规则的选择器分组，从而产生更紧凑的代码。

它不是列出的选择器从其中的 .highlight_bordered 中提取代码，而是将自己的选择器标准添加到 .highlight_bordered 样式规则中。

section.bmform {
    .thanks-for-requesting {
        .change-request {
            &:extend(.highlight_bordered);
        }
    }
    .bmform-submit-container {
        .bmform_submit {
            &:extend(.highlight_bordered);
        }
    }
    .btn {
        &.btn-danger {
            &.plus, 
            &.minus {
                &:extend(.highlight_bordered);
            }
        }
    }
}