时间戳

首页 > 解决方案 > 当多个ID具有相同的代码时，编写更少代码的正确方法是什么？

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

问题描述

我正在尝试将项目中的某些代码的 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 下有相同的代码时，这是转换此代码的唯一方法还是任何其他方式？看来我正在用更少的代码而不是使用 css 编写更多代码。

标签： cssless

解决方案

理想情况下，具有 ID 的元素将共享一个公共类，例如.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 缺少这个功能。）

推荐阅读