双色调渐变SASS Mixin优化：添加中间色与结束色的最佳方案

嘿，我来给你拆解下怎么给这个无条带渐变的SASS Mixin加上自定义结束色和中间色的功能——这个scrim坐标的思路确实很巧妙，用来解决渐变条带问题超实用。下面是具体的实现方法：

核心思路 #

原来的Mixin只支持单一起始色到透明的渐变，我们需要扩展参数，让它能接收结束色和可选的中间色，然后针对scrim坐标里的每个百分比点，计算对应位置的插值颜色，最终生成无条带的多色渐变。

修改后的完整Mixin代码 #

// 默认结束色设为透明，保持原Mixin的默认行为；可选中间色及中间位置
@mixin scrimGradient(
  $startColor: $cpi-purple,
  $endColor: rgba(0,0,0,0),
  $middleColor: null,
  $middlePosition: 50,
  $direction: 'to bottom'
) {
  $scrimCoordinates: (
    0: 1,
    19: 0.738,
    34: 0.541,
    47: 0.382,
    56.5: 0.278,
    65: 0.194,
    73: 0.126,
    80.2: 0.075,
    86.1: 0.042,
    91: 0.021,
    95.2: 0.008,
    98.2: 0.002,
    100: 0
  );
  
  $gradientStops: ();
  
  @each $percent, $easeValue in $scrimCoordinates {
    // 计算当前点在整个渐变区间的相对进度（0-1）
    $progress: $percent / 100;
    
    $currentColor: null;
    @if $middleColor != null {
      // 有中间色时，拆分区间计算颜色
      $middleProgress: $middlePosition / 100;
      @if $progress <= $middleProgress {
        // 0到中间位置：起始色→中间色
        $segmentProgress: $progress / $middleProgress;
        $currentColor: mix($middleColor, $startColor, $segmentProgress * 100);
      } @else {
        // 中间位置到100：中间色→结束色
        $segmentProgress: ($progress - $middleProgress) / (1 - $middleProgress);
        $currentColor: mix($endColor, $middleColor, $segmentProgress * 100);
      }
    } @else {
      // 无中间色时：起始色→结束色
      $currentColor: mix($endColor, $startColor, $progress * 100);
    }
    
    // 应用缓动透明度（保持原Mixin的无条带核心逻辑）
    $currentColor: rgba(red($currentColor), green($currentColor), blue($currentColor), alpha($currentColor) * $easeValue);
    
    // 添加到渐变色标列表
    $gradientStops: append($gradientStops, $currentColor $percent%, comma);
  }
  
  // 输出最终的线性渐变
  background: linear-gradient($direction, $gradientStops);
}

关键改动说明 #

• 参数扩展：新增了$endColor（默认透明，兼容原行为）、$middleColor（可选，默认null）、$middlePosition（中间色的位置，默认50%）。
• 颜色插值逻辑：
  • 没有中间色时，直接在0-100区间插值起始色到结束色；
  • 有中间色时，按$middlePosition拆分区间，分别插值两段颜色。
• 保留无条带核心：每个色标的透明度依然乘以原$scrimCoordinates里的缓动值，确保渐变无条带。

使用示例 #

1. 基础用法（仅起始+结束色） #

.card {
  @include scrimGradient($startColor: #6366f1, $endColor: #1e1b4b, $direction: 'to right');
}

2. 带中间色的渐变 #

.header {
  @include scrimGradient(
    $startColor: #ec4899,
    $middleColor: #8b5cf6,
    $endColor: #06b6d4,
    $middlePosition: 60, // 中间色在60%位置
    $direction: 'to bottom'
  );
}

3. 兼容原默认行为 #

.banner {
  @include scrimGradient(); // 会使用默认的$cpi-purple到透明的无条带渐变
}

这个方案既保留了原Mixin无条带的核心优势，又灵活支持了多色渐变的需求，而且参数设计兼容原有使用方式，不会破坏旧代码。

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