如何避免HTML与SASS中的代码重复？含按钮布局与图片路径优化需求

一、优化HTML结构（消除重复类） #

把所有工具栏按钮放到统一的父容器中，无需每个按钮重复添加布局类：

<div class="map-report-toolbar-background"></div>

<div class="map-report-toolbar-buttons">
  <div class="zoom-in-button"></div>
  <div class="zoom-out-button"></div>
  <div class="center-button"></div>
  <div class="refresh-button"></div>
  <div class="zoom-to-extend-button"></div>
  <div class="publish"></div>
  <div class="reportoption-button"></div>
</div>

二、重构SASS代码（统一路径+消除重复） #

通过SASS变量统一管理图片路径，用循环批量生成按钮样式，彻底消除代码冗余：

// 定义全局图片基础路径，后续修改只需要改这里
$image-base-path: "/assets/images/";

.map-report-toolbar-background {
  height: 100%;
  width: 100%;
  position: absolute;
  // 用变量拼接背景图路径，统一管理
  background-image: url($image-base-path + "Background-s.png");
  background-size: cover;
}

// 父容器统一设置所有按钮的基础布局样式
.map-report-toolbar-buttons {
  > div {
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    position: absolute;
    margin-left: 10px;
  }
}

// 定义按钮配置集合：键是类名，值是[图片名, 上边距]
$toolbar-button-configs: (
  zoom-in-button: ("ZoomIn-s.png", 10px),
  zoom-out-button: ("ZoomOut-s.png", 50px),
  center-button: ("Center-s.png", 90px),
  zoom-to-extend-button: ("ZoomExtent-s.png", 130px),
  publish: ("Download-s.png", 170px),
  refresh-button: ("Reset-s.png", 212px),
  reportoption-button: ("setting-s.png", 253px)
);

// 循环遍历配置，自动生成每个按钮的样式
@each $class-name, $config in $toolbar-button-configs {
  .#{$class-name} {
    background-image: url($image-base-path + nth($config, 1));
    margin-top: nth($config, 2);
  }
}

优化说明 #

1. 统一路径管理：用$image-base-path变量集中管理图片路径，后续修改路径或迁移资源时，只需修改这一个变量，避免逐个修改硬编码的路径。
2. 消除HTML类重复：通过父容器的子元素选择器，一次性给所有按钮应用基础布局样式，HTML中无需重复添加map-report-toolbar-button-layout类。
3. 消除SASS代码重复：用SASS的@each循环遍历按钮配置集合，批量生成每个按钮的背景图和上边距样式，避免重复编写几乎相同的代码块。
4. 优化背景图实现：把原来的<img>标签替换为CSS背景图，让背景图路径也纳入统一管理，同时减少HTML标签数量。

内容的提问来源于stack exchange，提问作者san test