嵌套HTML结构中CSS属性继承与重写 SCSS实现无边色类div继承边框色

DevOps 小满

2026-9-27

解决方案

你可以通过CSS自定义属性（变量）实现需求，CSS变量天然支持跨层级继承，不需要手动处理嵌套深度，代码也非常简洁：

SCSS代码

// 统一管理颜色配置，新增颜色仅需要修改该映射表即可
$area-color-map: (
  orange: (
    bg: sandybrown,
    border: orange
  ),
  red: (
    bg: lightpink,
    border: red
  ),
  green: (
    bg: lightgreen,
    border: green
  ),
  blue: (
    bg: lightblue,
    border: blue
  )
);

div {
  margin: 1em;
  padding: 1em;
  color: white;
}

div.area {
  // 边框色默认取变量值，没有对应变量时降级为灰色
  border: 2px solid var(--area-border-color, gray);
}

// 遍历生成所有bg-类样式
@each $colorName, $config in $area-color-map {
  div.bg-#{$colorName} {
    background-color: map-get($config, bg);
    // 仅设置变量，子元素会自动继承该值
    --area-border-color: #{map-get($config, border)};
  }
}

编译后原生CSS代码

div {
  margin: 1em;
  padding: 1em;
  color: white;
}

div.area {
  border: 2px solid var(--area-border-color, gray);
}

div.bg-orange {
  background-color: sandybrown;
  --area-border-color: orange;
}

div.bg-red {
  background-color: lightpink;
  --area-border-color: red;
}

div.bg-green {
  background-color: lightgreen;
  --area-border-color: green;
}

div.bg-blue {
  background-color: lightblue;
  --area-border-color: blue;
}