如何在 SASS/SCSS 中创建硬停止背景？

Question

我创建了一个具有 11 个硬停止点的渐变，创建了 11 个独立框的错觉。

就目前而言，线性渐变中硬编码了 % 的宽度。我忍不住认为有一种更有效的方法（通过 SCSS？）而不是这样编码：

.color-bar {
      background: linear-gradient( to left,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 9.09%,
        rgba(0, 0, 0, .1) 9.09%,
        rgba(0, 0, 0, .1) 18.18%,
        rgba(0, 0, 0, .2) 18.18%,
        rgba(0, 0, 0, .2) 27.27%,
        rgba(0, 0, 0, .3) 27.27%,
        rgba(0, 0, 0, .3) 36.36%,
        rgba(0, 0, 0, .4) 36.36%,
        rgba(0, 0, 0, .4) 45.45%,
        rgba(0, 0, 0, .5) 45.45%,
        rgba(0, 0, 0, .5) 54.54%,
        rgba(0, 0, 0, .6) 54.54%,
        rgba(0, 0, 0, .6) 63.63%,
        rgba(0, 0, 0, .7) 63.63%,
        rgba(0, 0, 0, .7) 72.72%,
        rgba(0, 0, 0, .8) 72.72%,
        rgba(0, 0, 0, .8) 81.81%,
        rgba(0, 0, 0, .9) 81.81%,
        rgba(0, 0, 0, 1) 90.09%,
        rgba(0, 0, 0, 1) 100%);
      height: 50px;
      width: 550px;
}

<div class="color-bar"></div>

Here's a rough Codepen in action.

感谢您提供的任何意见。

Answer 1

花了我一些时间，但这是：

@function hard-stops($direction, $from, $to, $steps) {
  $output: unquote("linear-gradient(") + $direction;
  @for $i from 0 through $steps {
    $output: $output + ', ' 
                     + mix($from, $to, $i*100/$steps) + ' ' 
                     + percentage($i/($steps+1)) + ', '
                     + mix($from, $to, $i*100/$steps) + ' ' 
                     + percentage(($i+1)/($steps+1));
  }
  $output: $output + ')';

  @return $output;
}
.color-bar {
  height: 50px;
  width: 550px;
  background: hard-stops(to left, rgba(0,0,0,1), rgba(0,0,0,0), 10);
}

jsFiddle.

限制是：需要通过混合颜色（例如，black 不是，不知道为什么 - 我不是 sass 方面的专家）。

如何在 SASS/SCSS 中创建硬停止背景？

How do I create hard-stop backgrounds in SASS/SCSS?

css

sass

linear-gradients