Как правильно написать меньше кода, если несколько идентификаторов имеют одинаковый код?

Question

Я пытаюсь преобразовать CSS в меньшее для некоторого кода в моем проекте.

У меня есть код ниже:

#broker_upload_doc .broker_personal_form .well,
#broker_upload_agr .broker_personal_form .well {
    padding: 2em 2em 0 2em;
}

Теперь, если я преобразую его в Меньше, оно становится:

#broker_upload_doc {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}
#broker_upload_agr {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}

Теперь мой вопрос, это единственный способ преобразовать этот код или каким-либо другим способом, если у меня один и тот же код под несколькими идентификаторами? Кажется, я пишу больше кода в Less вместо использования css.

Answer 1

В идеале элементы с идентификаторами должны иметь общий класс, такой как .broker_upload.Таким образом, он эффективно организует ваш HTML и имеет меньшее отношение к CSS / Less.Затем вы могли бы сделать это:

.broker_upload {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}

И, конечно, вы все еще можете сделать это (хотя это кажется очевидным?):

#broker_upload_doc,
#broker_upload_agr {
    .broker_personal_form {
        .well {
            padding: 2em 2em 0 2em;
        }
    }
}

(С другой стороны, Sassимеет директиву @at-root, которая позволила бы вам сделать это по-другому. Но на деле Меньше не хватает этой функции.)