css - 当多个 ID 具有相同的代码时，少写代码的正确方法是什么？

Question

我正在尝试将我元素中某些代码的 css 转换为 less。

我有以下代码 CSS:

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

现在如果我将它转换为 Less，它会变成:

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

现在我的问题是，当我在多个 ID 下有相同的代码时，这是转换此代码的唯一方法还是任何其他方法？看来我正在用 Less 而不是使用 css 编写更多代码。

Answer 1

理想情况下，具有 ID 的元素将共享一个公共(public)类，如 .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 指令，它可以让你用另一种方式来做。但是 afaik Less 缺少这个特性。)