How to write a SCSS function to change the background-color from row to row?

There is a table:

<table>
the <tr>
<td>red</td>
</tr>
the <tr>
<td>orange</td>
</tr>
the <tr>
<td>yellow</td>
</tr>
the <tr>
<td>green</td>
</tr>
the <tr>
<td>blue</td>
</tr>
the <tr>
<td>indigo</td>
</tr>
the <tr>
<td>violet</td>
</tr>
 </table>


Each row has a background-colorcorresponding to a specific color of the rainbow.
At the moment, setting background-color for each line as follows:

tr {
 &:first-child {
 background-color: adjust-hue($bg-base, 0deg);
}
 &:nth-child(2) {
 background-color: adjust-hue($bg-base, 30deg);
}
 &:nth-child(3) {
 background-color: adjust-hue($bg-base, 60deg);
}
 &:nth-child(4) {
 background-color: adjust-hue($bg-base, 120deg);
}
 &:nth-child(5) {
 background-color: adjust-hue($bg-base, 180deg);
}
 &:nth-child(6) {
 background-color: adjust-hue($bg-base, 240deg);
}
 &:nth-child(7) {
 background-color: adjust-hue($bg-base, 300deg);
}
 }


How to set background-color for each row through the function SCSS? Thanks in advance.

Codepen: https://codepen.io/hollis_Wel/pen/XwOywo
March 23rd 20 at 18:57
2 answers
March 23rd 20 at 18:59
Solution
Thank you for your answer, it helped! - hollis_Wel commented on March 23rd 20 at 19:02
March 23rd 20 at 19:01
@for $i from 1 through 7{
tr{
 &:nth-child(#{$i}) {
 @if($i <= 2) {
 background-color: adjust-hue($bg-base, (30 * ($i - 1)));
 } @else {
 background-color: adjust-hue($bg-base (60 * ($i - 2)));
}
}
}
}

Find more questions by tags Sass