Sass 圓形階層漸層

Circle Gradient

Sass

參數說明：

• shift: 從中心點移動多少位置，如果是 120px 則會從上一層的 div 左上角的原點，往右邊且往下個移 120px。
• step: 多少 pixel 換另一個顏色。
• colors: 每一層的顏色，由內到外排序。

$shift: 120px;
$step: 30px;
$colors: ( #fbffa0 #cfff76 #a2e27a #4ab9aa #2c678d #07171f );

@for $i from 0 to length($colors) {
  $color: unquote(nth($colors, $i + 1));

  .layer-#{$i} {
    position: absolute;
    background: transparent;

    border-radius: ($i + 1) * $step;
    border: $step solid $color;
    padding: 0px;

    top: $shift - ($i + 1) * $step;
    left: $shift - ($i + 1) * $step;
    width: 2 * $i * $step;
    height: 2 * $i * $step;
  }
}

Html

<div>
  <div class='layer-0'></div>
  <div class='layer-1'></div>
  <div class='layer-2'></div>
  <div class='layer-3'></div>
  <div class='layer-4'></div>
  <div class='layer-5'></div>
</div>

Preview

• Codepen