如何在SCSS中减少变量使用并实现页面对应配色需求

1. 用SCSS循环批量生成CSS变量 #

先把零散的颜色变量整理成SCSS映射（map），通过循环给每个页面的根元素绑定专属CSS变量，避免重复编写样式：

// 把所有线路颜色整理成统一映射
$line-colors: (
  linea1: rgba(58,167,226),
  linea2: rgba(196,29,39),
  linea3: rgba(250,212,60)
);

// 循环生成每个页面的根元素样式，注入CSS变量
@each $name, $color in $line-colors {
  .metro-#{$name} {
    --primary-color: #{$color};
    // 可自动生成适配的文本色（亮色配黑字，暗色配白字）
    --text-color: if(lightness($color) > 50, #000, #fff);
  }
}

2. 给每个页面根元素加专属标识 #

在对应页面的<html>或<body>标签上添加匹配类名：

<!-- metro-linea1.html -->
<html class="metro-linea1">
<!-- 页面内容 -->
</html>

<!-- metro-linea2.html -->
<html class="metro-linea2">
<!-- 页面内容 -->
</html>

3. 全局样式直接复用CSS变量 #

所有需要配色的元素，直接引用全局CSS变量即可，不用为每个页面单独写样式：

// 全局通用样式
.header {
  background-color: var(--primary-color);
  color: var(--text-color);
}

.card {
  border-left: 3px solid var(--primary-color);
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--text-color);
}

进阶：自动绑定页面类名（无需手动修改HTML） #

如果不想逐个页面加类，可以用JS自动识别当前页面文件名，给根元素添加上对应类：

// 从URL中提取页面文件名（比如metro-linea1.html）
const pageName = location.pathname.split('/').pop().replace('.html', '');
document.documentElement.classList.add(pageName);

这样每个页面会自动匹配对应的配色变量，完全不用手动修改HTML结构。

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