Различные селекторы, один и тот же стиль, как избежать дублирования вывода за меньшее - PullRequest
Новая
       6

Различные селекторы, один и тот же стиль, как избежать дублирования вывода за меньшее

0 голосов
/ 29 мая 2019

У меня следующий код меньше, и это приводит к генерации четырех кодовых блоков с тремя блоками, имеющими одинаковое содержимое.

Есть ли способ обеспечить генерацию только двух кодовых блоков без необходимостииспользовать для этих элементов селекторы с длинной цепью, разделенные запятой? 

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

1 Ответ

0 голосов
/ 29 мая 2019

Решение было бы использовать расширение.Используя расширение, оно группирует селекторы, которые используют одни и те же правила стиля, что приводит к более компактному коду.

Вместо перечисленных селекторов, извлекающих код из .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);
            }
        }
    }
}
...