如何使用SASS创建标准与高对比度背景图片混合宏

嘿，很高兴能帮你搞定这个需求！你已经搭建了一套很清晰的颜色系统，接下来我们可以把这个逻辑无缝延伸到背景图片的处理上，实现一个能轻松切换标准/高对比度背景图的mixin，同时还能和你现有的颜色体系联动。

第一步：完善你的颜色获取函数 #

先把你没写完的get-color函数补全，确保它能正确从颜色映射里取值，还带友好的错误提示：

$colors: (
  standard: (
    primary-color-blue: #2aace2,
    mid-blue-color:#2695d2,
    dark-blue-color:#124b62
  ),
  contrasted: (
    primary-color-blue: #177eab,
    mid-blue-color:#1c6f9b,
    dark-blue-color:#124b62
  )
);

@function get-color($key, $type: 'standard') {
  @if map-has-key(map-get($colors, $type), $key) {
    @return map-get(map-get($colors, $type), $key);
  } @else {
    @error "颜色键 #{$key} 在 #{$type} 类型中不存在，请检查你的颜色映射！";
  }
}

第二步：创建背景图映射 #

模仿颜色系统的结构，定义一个背景图的映射，把标准和高对比度的图片路径对应起来，保持结构一致性：

// 背景图映射，和颜色系统的类型（standard/contrasted）保持统一
$bg-images: (
  standard: (
    hero-bg: '/assets/images/standard-hero-bg.jpg',
    card-bg: '/assets/images/standard-card-bg.png',
    footer-bg: '/assets/images/standard-footer-bg.svg'
  ),
  contrasted: (
    hero-bg: '/assets/images/contrasted-hero-bg.jpg',
    card-bg: '/assets/images/contrasted-card-bg.png',
    footer-bg: '/assets/images/contrasted-footer-bg.svg'
  )
);

第三步：写背景图获取函数 #

和get-color逻辑一致，写一个get-bg-image函数来获取对应类型的图片路径，同样加入错误检查：

@function get-bg-image($key, $type: 'standard') {
  @if map-has-key(map-get($bg-images, $type), $key) {
    @return url(map-get(map-get($bg-images, $type), $key));
  } @else {
    @error "背景图键 #{$key} 在 #{$type} 类型中不存在，请检查你的背景图映射！";
  }
}

第四步：核心混合宏（Mixin） #

现在写一个功能完整的mixin，它不仅能设置背景图，还能搭配对应类型的背景色作为加载失败的fallback，支持自定义背景属性（比如重复、位置、尺寸），甚至能自动适配文本颜色保证可读性：

@mixin bg-image($key, $type: 'standard', $bg-color-key: null, $bg-props: ()) {
  // 应用目标背景图
  background-image: get-bg-image($key, $type);
  
  // 如果传入背景色key，用对应类型的颜色作为图片加载失败的兜底
  @if $bg-color-key {
    background-color: get-color($bg-color-key, $type);
  }
  
  // 处理额外的背景属性（比如background-repeat、background-position等）
  @each $prop, $value in $bg-props {
    background-#{$prop}: $value;
  }
  
  // 可选：自动设置文本颜色，确保和背景色有足够对比度，提升可用性
  @if $bg-color-key {
    color: contrast(get-color($bg-color-key, $type));
  }
}

第五步：使用示例 #

现在你可以轻松调用这个mixin来设置不同模式的背景了，甚至可以通过全局变量一键切换所有元素的主题：

// 标准模式的英雄区背景
.hero-section {
  @include bg-image('hero-bg', 'standard', 'primary-color-blue', (
    repeat: no-repeat,
    position: center center,
    size: cover
  ));
}

// 高对比度模式的卡片背景
.feature-card {
  @include bg-image('card-bg', 'contrasted', 'mid-blue-color', (
    repeat: repeat-x,
    position: bottom left
  ));
}

// 全局切换主题（更高效的方式）
// 定义全局模式变量，修改这个值就能一键切换所有元素的颜色和背景图
$current-theme-mode: 'standard'; // 改成'contrasted'即可全局切换到高对比度模式

.footer {
  @include bg-image('footer-bg', $current-theme-mode, 'dark-blue-color', (
    size: contain
  ));
}

为什么这么实现？ #

• 统一结构：背景图和颜色系统共用一套类型标识，后续维护时不用切换逻辑
• 错误提示：函数里的@error能帮你快速排查拼写错误或缺失的资源键
• 灵活性：支持自定义背景属性，适配不同场景的布局需求
• 鲁棒性：自带背景色兜底和文本对比度适配，提升页面的可用性和兼容性

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