css - 如何将相同的 CSS 类集中分配给多个元素，例如在使用像 Bootstrap 这样的框架时？

Question

刚开始学习web开发，尝试过Bootstrap、960、Foundation等几个前端框架。

例如，使用 Bootstrap，当要为多个图像普遍分配相同的一组类时，现在我发现有必要将所有这些类单独放置在每个元素中，例如:

<div id="foo" class="container">
    <img src="img1.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img2.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img3.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img4.jpg" class="thumbnail img-responsive etc etc"/>
    <img src="img5.jpg" class="thumbnail img-responsive etc etc"/>
</div>

有没有人觉得这不方便？我觉得必须这样做才能避免出现样式表的需要:将样式与结构分开并避免重复。

我希望我可以选择#foo 中的所有img，并为它们提供相同的一组类。我相信应该有一种方法这个，只有我不知道。伙计们有什么想法吗？

Answer 1

利用框架的 CSS 预处理器(例如 Less、Sass 等)

在 Less 中，您的示例可能是:

@import "bootstrap/less/bootstrap.less";
#foo img {
  .thumbnail;
  .img-responsive;
}