JSFiddle - React, Tailwind, and code Playground

by kakadodo

HTML

<div class="container">
  <div class="ray">1</div>
  <div class="ray">2</div>
  <div class="ray">3</div>
  <div class="ray">4</div>
  <div class="ray">5</div>
  <div class="ray">6</div>
  <div class="ray">7</div>
  <div class="ray">8</div>
  <div class="ray">9</div>
  <div class="ray">10</div>
</div>

SCSS

.container {
  display: flex;
}

.ray {
  height: 100px;
  flex: 1 1 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

$total: 10;
$step: 360deg / $total;
@for $i from 1 through $total {
  // for 迴圈會跑 10 次，從 1 跑到 10
  .ray:nth-child(#{$i}) {
    // 分別指定到每個 .ray
    background: adjust-hue(blue, $i * $step); // 調整每個 .ray 的色相顏色
  }
}